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

posted @ 2017-03-16 10:56  handsomeBoys  阅读(1621)  评论(0编辑  收藏  举报