zoukankan      html  css  js  c++  java
  • 通过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>

  • 相关阅读:
    十一周总结
    第十周课程总结
    第九周课程总结&实验报告
    第八周课程总结&实验报告
    第七周&实验报告五
    第六周&Java实验报告四
    课程总结
    第十四周课程总结
    第十三周总结
    十二周课程总结
  • 原文地址:https://www.cnblogs.com/handsomeBoys/p/6558323.html
Copyright © 2011-2022 走看看