通过css3,实现加载转动贝塞尔曲线动画
参考博客:http://blog.jobbole.com/94966/
css代码:
.loading { position : relative; display : inline-block; width: 100px;height: 100px;background-color: cyan} .loading .dot { position: absolute; opacity : 0; transform: rotate(225deg); animation-name: loading; animation-iteration-count: infinite; animation-duration: 5.28s; } .loading .dot:after { content : ""; position : absolute; width : 6px; height : 6px; border-radius : 50%; background : #000; } .loading .dot:nth-child(2) { animation-delay : .23s; } .loading .dot:nth-child(3) { animation-delay : .46s; } .loading .dot:nth-child(4) { animation-delay : .69s; } .loading .dot:nth-child(5) { animation-delay : .92s; } .dot{ position: absolute; height: 50px; width: 50px; top:50%; left:50%; margin-top: -25px; margin-left: -25px;; }
html:
<div class="loading"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>