首页 > 其他 > 详细

加载中动画

时间:2017-02-15 13:38:10      阅读:163      评论:0      收藏:0      [点我收藏+]
利用的是边框切圆
<style>
    .box {
      width: 80px; height: 60px;
     
      margin: 200px;
      padding: 80px 150px;
      position: relative;
    }
    .box div {
      width: 80px; height: 80px;
      border-radius: 50%;
      /*background: blue;*/
      border: 5px solid rgba(255, 255, 255, 0.5);
      position: absolute;
      border-top: 5px solid rgba(255, 255, 255, 1);
      animation: rotate 1.3s infinite;
    }
    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg);}
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="div1"></div>
  </div>
</body>

加载中动画

原文:http://www.cnblogs.com/adialike/p/6401022.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!