html/css语言栏目：html.css_H5之家 - 中国HTML5教程资源分享第一站

> web前端 > HTML/CSS > 正文 CSS 实现加载动画之四-圆点旋转我要投稿圆点旋转也是加载动画中经常用到的。其实现方式和菊花旋转一样，只不过一个是线条形式，一个是圆点形式。圆点按照固定的旋转角度排列，加上延时的改变透明度的动画就可以实现。这个实现也比较简单。

案例源代码

复制代码

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

5 <title>CSS3实现加载的动画效果4</title>

6 <meta name="author" content="rainna" />

7 <meta name="keywords" content="rainna's css lib" />

8 <meta name="description" content="CSS3" />

9 <style>

10 *{margin:0;padding:0;}

12 .m-load,.m-load2{width:100px;height:100px;margin:100px auto 0;background:url('load.png') top center no-repeat;}

13 .m-load2{background:green;}

15 /** 加载动画的静态样式 **/

16 .m-load2{position:relative;}

17 .m-load2 .item{position:absolute;left:50%;top:0;width:14px;height:100%;margin-left:-7px;}

18 .m-load2 .item:before,.m-load2 .item:after{content:'';display:block;width:14px;height:14px;border-radius:14px;background:#fff;}

19 .m-load2 .item:after{position:absolute;bottom:0;}

20 .m-load2 .item:nth-child(2){-webkit-transform:rotate(45deg);}

21 .m-load2 .item:nth-child(3){-webkit-transform:rotate(90deg);}

22 .m-load2 .item:nth-child(4){-webkit-transform:rotate(135deg);}

24 /** 加载动画 **/

25 @-webkit-keyframes load{

26 0%{opacity:0;}

27 100%{opacity:1;}

28 }

29 .m-load2 .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0.7s infinite;}

30 .m-load2 .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.6s infinite;}

31 .m-load2 .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.5s infinite;}

32 .m-load2 .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.4s infinite;}

33 .m-load2 .item:nth-child(1):after{-webkit-animation:load 0.8s linear 0.3s infinite;}

34 .m-load2 .item:nth-child(2):after{-webkit-animation:load 0.8s linear 0.2s infinite;}

35 .m-load2 .item:nth-child(3):after{-webkit-animation:load 0.8s linear 0.1s infinite;}

36 .m-load2 .item:nth-child(4):after{-webkit-animation:load 0.8s linear 0s infinite;}

37 </style>

38 </head>

40 <body>

41 <div class="m-load"></div>

43 <div class="m-load2">

44 <div class="item"></div>

45 <div class="item"></div>

46 <div class="item"></div>

47 <div class="item"></div>

48 </div>

49 </body>

50 </html>

点击复制链接与好友分享!回本站首页上一篇：CSS 实现加载动画之三-钢琴按键下一篇：xml基础学习笔记01 相关文章

浅析Flash动画网站设计的思路、布局、

原生CSS动画回调事件

CSS3实现Tooltip提示框飞入飞出动画

css3 animation动画事件

CSS3中的动画效果记录

用css3和canvas实现的蜂窝动画效果

CSS3中的动画效果-------Day72

CSS 实现加载动画之一-菊花旋转

CSS 实现加载动画之二-圆环旋转

CSS 实现加载动画之三-钢琴按键

图文推荐