emlog 纯CSS loading特效篇
  • 内容
  • 评论
  • 相关

QQ截图20160909213615.png

html代码:

<div class="loading">
  <div class="loading2">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>
css代码:

.loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:1000;background-color:rgba(90,90,90,.5)}
.loading2{position:absolute;top:50%;left:50%;z-index:1000;margin:-46px 0 0 -46px;width:92px;height:92px}
.loading .block{width:40px;height:40px;position:absolute;top:5;left:0}
.loading .block:nth-child(1){top:0;left:0;right:auto;bottom:auto;-webkit-animation:top-left 1s infinite;background-color:#00aacf}
.loading .block:nth-child(2){top:0;left:50px;right:auto;bottom:auto;-webkit-animation:top-right 1s infinite;background-color:#f6c574}
.loading .block:nth-child(3){top:50px;left:0;right:auto;bottom:auto;-webkit-animation:bottom-left 1s infinite;background-color:#fc5652}
.loading .block:nth-child(4){top:50px;left:50px;right:auto;bottom:auto;-webkit-animation:bottom-right 1s infinite;background-color:#00b3a0}
@-webkit-keyframes top-left{0%{left:0;top:0}
25%{left:50px;top:0;-webkit-transform:rotate(90deg)}
50%{left:50px;top:50px;-webkit-transform:rotate(180deg)}
75%{left:0;top:50px;-webkit-transform:rotate(270deg)}
100%{left:0;top:0;-webkit-transform:rotate(360deg)}}
@-webkit-keyframes top-right{0%{left:50px;top:0}
25%{left:50px;top:50px}
50%{left:0;top:50px}
75%{left:0;top:0}
100%{left:50px;top:0}}
@-webkit-keyframes bottom-left{0%{left:50px;top:50px}
25%{left:0;top:50px;-webkit-transform:rotate(90deg)}
50%{left:0;top:0;-webkit-transform:rotate(180deg)}
75%{left:50px;top:0;-webkit-transform:rotate(270deg)}
100%{left:50px;top:50px;-webkit-transform:rotate(360deg)}}
@-webkit-keyframes bottom-right{0%{left:0;top:50px}
25%{left:0;top:0}
50%{left:50px;top:0}
75%{left:50px;top:50px}
100%{left:0;top:50px}}
@-moz-keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;-moz-transform:rotate(160deg);}
50%{opacity:1;-moz-transform:rotate(145deg);}
100%{opacity:0;-moz-transform:rotate(-320deg);}}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(360deg);}}
@-webkit-keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;-webkit-transform:rotate(160deg);}
50%{opacity:1;-webkit-transform:rotate(145deg);}
100%{opacity:0;-webkit-transform:rotate(-320deg);}}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}}
@-o-keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;-o-transform:rotate(160deg);}
50%{opacity:1;-o-transform:rotate(145deg);}
100%{opacity:0;-o-transform:rotate(-320deg);}}
@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}
100%{-o-transform:rotate(360deg);}}
@-ms-keyframes spinPulse{0%{box-shadow:0 0 1px #505050;opacity:0;-ms-transform:rotate(160deg);}
50%{opacity:1;-ms-transform:rotate(145deg);}
100%{opacity:0;-ms-transform:rotate(-320deg);}}
@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}
100%{-ms-transform:rotate(360deg);}}
.loading, .loading2{display:none}

点赞
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
emlog 纯CSS loading特效篇
本文标签:这篇文章木有标签
版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。
本文链接:http://suppore.cn/css_loading.html   百度已收录

发表评论

电子邮件地址不会被公开。 必填项已用*标注