通過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>