CSS 实现加载动画之四-圆点旋转
生活随笔
收集整理的這篇文章主要介紹了
CSS 实现加载动画之四-圆点旋转
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原文:CSS 實現加載動畫之四-圓點旋轉
圓點旋轉也是加載動畫中經常用到的。其實現方式和菊花旋轉一樣，只不過一個是線條形式，一個是圓點形式。圓點按照固定的旋轉角度排列，加上延時的改變透明度的動畫就可以實現。這個實現也比較簡單。
?
1. 動畫截圖
?
?
2.?案例源代碼
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;} 11 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;} 14 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);} 23 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> 39 40 <body> 41 <div class="m-load"></div> 42 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 实现加载动画之四-圆点旋转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Cocos2d-x】源代码分析之 2d
- 下一篇： CSS3菜单栏透明兼容问题