css3动画实现类菊花loading效果
实现一个loading效果，需要分平台来考虑。
1.在PC端，因为IE9及其以下的版本实现不了CSS3动画效果，所以用CSS3是实现不了的，在这里比较建议使用gif的动态图片来实现，能兼容各主流浏览器。
在这里介绍一个很好用的在线loading生成工具，方便、快捷！http://preloaders.net/en/circular
2.在移动端，不考虑winphone上低版本的浏览器时（winphone低版本浏览器是指采用IE9及其以下的内核），用css3实现其效果是比较好的选择。
下面介绍移动端的CSS3实现类菊花loading效果：
实现的思路是：画出12个点，类似于时钟12个点
用旋转和变换，给12个点进行定位：即每个点旋转相差30度角，定义纵向移动距离相同，统一为34px
设置每个点的延迟时间，使达到每个点执行的时间不同。这里设置了12个点的总共执行时间是2S，所以每个点的延迟执行时间相差1/6S
每个点的变化效果是opacity、width、height都逐渐变化
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <meta name="MobileOptimized" content="320"/> <title>loading</title> <style> @-webkit-keyframes loading { from {opacity: 1;width:1px;height:1px;} to {opacity: 0.25;width:8px;height:8px;} } div.spinner { position: absolute; top:50%; left:50%; display: inline-block; } div.spinner div { width:8px; height:8px; background: #a4a2a4; border:1px solid #fff; position: absolute; left: 100%; top: 100%; opacity: 0; -webkit-animation: loading 2s linear infinite; -webkit-border-radius: 30px; } div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -34px); -webkit-animation-delay: -0s;} div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -34px); -webkit-animation-delay: -1.8334s;} div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -34px); -webkit-animation-delay: -1.6668s;} div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -34px); -webkit-animation-delay: -1.5002s;} div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -34px); -webkit-animation-delay: -1.3336s;} div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -34px); -webkit-animation-delay: -1.167s;} div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -34px); -webkit-animation-delay: -1.0004s;} div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -34px); -webkit-animation-delay: -0.8338s;} div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -34px); -webkit-animation-delay: -0.6672s;} div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -34px); -webkit-animation-delay: -0.5006s;} div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -34px); -webkit-animation-delay: -0.334s;} div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -34px); -webkit-animation-delay: -0.1674s;} </style> </head> <body style="margin:auto;width:300px;"> <div class="spinner"> <div class="bar1"> </div> <div class="bar2"> </div> <div class="bar3"> </div> <div class="bar4"> </div> <div class="bar5"> </div> <div class="bar6"> </div> <div class="bar7"> </div> <div class="bar8"> </div> <div class="bar9"> </div> <div class="bar10"> </div> <div class="bar11"> </div> <div class="bar12"> </div> </div>
</body>
</html>
只要把上面每个点的width、height、border-radius还有@-webkit-keyframes loading里面改动一下，就能够实现如下其他效果：
源代码下载：点击这里
