css如何实现吃豆豆加载动画效果(css,开发技术)

豆豆加载效果

point_down:html代码：

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

point_down:css代码：

<style>@-webkit-keyframesup{0%,100%{transform:rotate(0);}50%{transform:rotate(-30deg);}}@-moz-keyframesup{0%,100%{transform:rotate(0);}50%{transform:rotate(-30deg);}}@-o-keyframesup{0%,100%{transform:rotate(0);}50%{transform:rotate(-30deg);}}@keyframesup{0%,100%{transform:rotate(0);}50%{transform:rotate(-30deg);}}@-webkit-keyframesdown{0%,100%{transform:rotate(0);}50%{transform:rotate(30deg);}}@-moz-keyframesdown{0%,100%{transform:rotate(0);}50%{transform:rotate(30deg);}}@-o-keyframesdown{0%,100%{transform:rotate(0);}50%{transform:rotate(30deg);}}@keyframesdown{0%,100%{transform:rotate(0);}50%{transform:rotate(30deg);}}@-webkit-keyframesr-to-l{100%{margin-left:-1px;}}@-moz-keyframesr-to-l{100%{margin-left:-1px;}}@-o-keyframesr-to-l{100%{margin-left:-1px;}}@keyframesr-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:50px50px00;-webkit-animation:up0.4sinfinite;-moz-animation:up0.4sinfinite;-o-animation:up0.4sinfinite;animation:up0.4sinfinite;}body.pacman:after{margin-top:-1px;border-radius:0050px50px;-webkit-animation:down0.4sinfinite;-moz-animation:down0.4sinfinite;-o-animation:down0.4sinfinite;animation:down0.4sinfinite;}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:30px00#ccc,60px00#ccc,90px00#ccc,120px00#ccc,150px00#ccc;-webkit-animation:r-to-l0.4sinfinite;-moz-animation:r-to-l0.4sinfinite;-o-animation:r-to-l0.4sinfinite;animation:r-to-l0.4sinfinite;}</style>

css的三种引入方式

1.行内样式，最直接最简单的一种，直接对HTML标签使用style=""。

2.内嵌样式，就是将CSS代码写在之间，并且用进行声明。

3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上就可以了。其次就是导入样式，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，不建议使用。