安卓设置菊花动画_css3动画实现类菊花loading效果

loading

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;}