您现在的位置是:网站首页>前端技术>CSS3CSS3

CSS实现一个loading 载加中动画

神夜2020-08-22 14:41:40CSS31322人已围观文章来源:神夜个人博客

简介CSS实现一个loading 载加中动画可用于提交资料时使用

效果:


代码如下:



<style type="text/css">
 *margin:0padding:0pxfont-size:12pxbox-sizingborder-box;}
 p{margin:0pxpadding:0px;}
 /***loading动画***/
 .loadingwidth:100pxpadding:16px 0text-align:centercolor:#fffpositionfixedleft:0right:0marginautotop:50%transformtranslateY(-50%); z-index:2222border-radius:5pxbox-shadow:#eee 0 0 10pxbackground:rgba(0,0,0,0.8); }
 .loading divpositionrelativemargin:0 autowidth:40pxheight:40pxborder-radius:50%margin-bottom:10px;}
 .loading span{width6pxheight:6pxdisplayblockpositionabsolute;  border-radius50%background:#fff-webkit-animation: load 1.04s ease infinite;}
 @-webkit-keyframes load{  0%{ opacity0; } 100%{opacity:1;}}
 .loading span:nth-child(1){-webkit-animation-delay:0.13stop:0left:0right:0margin:auto;  }
 .loading span:nth-child(2){-webkit-animation-delay:0.26sright:5pxtop:5px; }
 .loading span:nth-child(3){-webkit-animation-delay:0.39sright:0top:50%transform:translateY(-50%); }
 .loading span:nth-child(4){-webkit-animation-delay:0.52sright:5pxbottom:5px;}
 .loading span:nth-child(5){-webkit-animation-delay:0.65sbottom:0pxleft:0pxright:0margin:auto;}
 .loading span:nth-child(6){-webkit-animation-delay:0.78sbottom:5pxleft:5px;}
 .loading span:nth-child(7){-webkit-animation-delay:0.91sleft:0pxtop:50%transformtranslateY(-50%);}
 .loading span:nth-child(8){-webkit-animation-delay:1.04stop:5pxleft:5px;}
 
</style>

 <div class="loading">
  <div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <p>加载中...</p>
</div>


站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:288条
  • 微信公众号:扫描二维码,关注我们
分享按钮