css制作超萌吃豆豆加载动画效果

发布时间：2018-02-26 16:49:57 作者：佚名

这篇文章主要介绍了css制作超萌吃豆豆加载动画效果,需要的朋友可以参考下

豆豆加载效果

point_down:html代码：

<div class="demo">
 <div class="pacman"></div>
<div class="dot"></div>

point_down:css代码：

<style>
@-webkit-keyframes up {
  0%, 100% {    transform: rotate(0);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@-moz-keyframes up {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@-o-keyframes up {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@keyframes up {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@-webkit-keyframes down {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(30deg);
  }
}
@-moz-keyframes down {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(30deg);
  }
}
@-o-keyframes down {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(30deg);
  }
}
@keyframes down {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(30deg);
  }
}
@-webkit-keyframes r-to-l {
  100% {
    margin-left: -1px;
  }
}
@-moz-keyframes r-to-l {
  100% {
    margin-left: -1px;
  }
}
@-o-keyframes r-to-l {
  100% {
    margin-left: -1px;
  }
}
@keyframes r-to-l {
  100% {
    margin-left: -1px;
  }
}
body {
  background: #000;
  overflow: hidden;
  margin: 0;
}
body .pacman:before, body .pacman:after {
  content: '';
  position: absolute;
  background: #FFC107;
  width: 100px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  border-radius: 50px 50px 0 0;
  -webkit-animation: up 0.4s infinite;
  -moz-animation: up 0.4s infinite;
  -o-animation: up 0.4s infinite;
  animation: up 0.4s infinite;
}
body .pacman:after {
  margin-top: -1px;
  border-radius: 0 0 50px 50px;
  -webkit-animation: down 0.4s infinite;
  -moz-animation: down 0.4s infinite;
  -o-animation: down 0.4s infinite;
  animation: down 0.4s infinite;
}
body .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: 30px;
  border-radius: 50%;
  background: #ccc;
  z-index: -1;
  box-shadow: 30px 0 0 #ccc, 60px 0 0 #ccc, 90px 0 0 #ccc, 120px 0 0 #ccc, 150px 0 0 #ccc;
  -webkit-animation: r-to-l 0.4s infinite;
  -moz-animation: r-to-l 0.4s infinite;
  -o-animation: r-to-l 0.4s infinite;
  animation: r-to-l 0.4s infinite;
}
  </style>

总结

以上所述是小编给大家介绍的css制作超萌吃豆豆加载动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持！

Tag：css 加载

纯CSS3实现的多层圆环loading加载动画特效源码
是一款实现了多圆环同时旋转的多层圆环loading加载动画特效，非常有意思，大家可以自行替换颜色，适应于绝大多数的网站使用，欢迎有兴趣的朋友们前来下载使用
2018-01-19
纯CSS3实现带有卫星轨道旋转效果的加载动画特效源码
这是一款基于纯CSS3实现带有卫星轨道旋转效果的加载动画特效源码。画面上有三个颜色各异且相互独立的弧线在各自的轨道上旋转，整体呈现出轨道卫星动画的加载视觉效果
2018-01-15
CSS 的加载及加载顺序简介
这篇文章主要给大家介绍CSS 的加载及加载顺序以及遇到的问题思路解析，文中还给大家补充介绍了关于html，css，js三者的加载顺序问题，需要的朋友参考下吧
2017-12-25
css3 animation制作loading白色圆点滑过加载动画特效源码
这是一款基于css3 animation制作白色圆点滑过加载动画特效源码，一组白色圆点从左向右依次滑过，圆点由小渐大模糊呈现。本段代码可以在各个网页使用，有需要的朋友可以直接
2017-12-21
纯CSS3仿Skype圆点旋转加载动画特效源码
纯CSS3仿Skype圆点旋转加载动画特效源码是一款loader登录界面加载动画，圆点旋转加载动画。本段代码可以在各个网页使用，有需要的朋友可以直接下载使用
2017-12-18
html5+css3实现的多彩旋转式svg加载动画特效源码
html5+css3实现的多彩旋转式svg加载动画特效源码是一段实现了非常炫酷也精致的svg加载动画效果，本段代码适应于所有网页使用，欢迎有兴趣的朋友前来下载
2017-09-21
CSS制作提示框 ‘正在加载请。。。。。’
最近做项目遇到这样的需求，页面加载数据比较慢，一直没有反应，下面小编给大家带来了基于CSS制作提示框 ‘正在加载请。。。。。’功能，需要的朋友参考下吧
2017-09-14