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    百度已收录
正文到此结束

点击下方支持本站

点击支持下贵站吧
点击支持下贵站吧

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

微笑可爱憨笑鼓掌白眼发呆撇嘴色得意吐抠鼻可怜呲牙惊讶冷汗流泪大哭发怒抚摸傲慢惊恐鄙视疑问奸笑抓狂偷笑流汗擦汗晕委屈吓衰糗大了威武给力牛逼

评论信息框

火箭正在发射中...


既然没有吐槽,那就赶紧抢沙发吧!