Emlog&Wordpress 纯CSS loading特效篇&6

GIF.gif

PHP代码:

<div class="firefly"> <div class="head"></div> <div class="wing left"></div> <div class="wing right"></div> <div class="glow"></div> <div class="shadow"></div></div>
CSS代码:
body { width: 100%; height: 100%; position: absolute; background: #222; overflow: hidden;}.firefly, .firefly div { position: relative;}.firefly { width: 20px; height: 20px; border-radius: 70px 70px 0 0; margin: 10% auto; z-index: 1; animation: move 5s ease infinite; -moz-animation: move 5s ease infinite; -webkit-animation: move 5s ease infinite; -o-animation: move 20s ease infinite;}.head{ background:#1A1515; height:10px; width:20px; border-radius: 90px 90px 0 0; -moz-border-radius: 90px 90px 0 0; -webkit-border-radius: 90px 90px 0 0; top:35px; z-index:4;}.wing { background: #FFFFF9; width: 20px; height: 20px; border-radius: 40px; transform: rotate(110deg) skew(40deg); -o-transform: rotate(110deg) skew(40deg); -moz-transform: rotate(110deg) skew(40deg); -webkit-transform: rotate(80deg) skew(40deg); z-index: 3;}.wing.left{ top:30px; left:-5px;}.wing.right{ top:10px; left:5px; transform: rotate(30deg) skew(40deg); -o-transform: rotate(30deg) skew(40deg); -moz-transform: rotate(30deg) skew(40deg); -webkit-transform: rotate(30deg) skew(40deg); }.glow { border-radius: 0 0 70px 70px; width: 60%; height: 70%; background: #FBFF7A; margin: 0 auto; z-index: 2; animation: glowing 1s linear infinite alternate; -webkit-animation: glowing 1s linear infinite alternate; transition: 1s all;}.shadow { background: #1A1515; width: 100%; height: 25%; border-radius: 200%; margin-top: -10%;}//glowing animation@keyframes glowing { from { box-shadow: inset 0 0 20px 20px #E8D500, 0 0 50px 10px #E8D500, inset 0 0 80px 80px #FFED24; } to { box-shadow: inset 0 0 20px 20px #E8D500, 0 0 100px 10px #E8D500, inset 0 0 50px 50px #FFED24; }}@-webkit-keyframes glowing { from { box-shadow: inset 0 0 20px 20px #E8D500, 0 0 50px 10px #E8D500, inset 0 0 80px 80px #FFED24; } to { box-shadow: inset 0 0 20px 20px #E8D500, 0 0 130px 10px #E8D500, inset 0 0 50px 50px #FFED24; }}@-moz-keyframes glowing { from { box-shadow: inset 0 0 20px 20px #E8D500, 0 0 50px 10px #E8D500, inset 0 0 80px 80px #FFED24; } to { box-shadow: inset 0 0 20px 20px #E8D500, 0 0 130px 10px #E8D500, inset 0 0 50px 50px #FFED24; }}//moving animation@keyframes move{0% {left:0px; top:0px; transform: rotate(45deg);}50%{left: 0px; top:0px; transform: rotate(-45deg);}100% {left: 0px; top:0px; transform: rotate(45deg);}}@-webkit-keyframes move {0% {left:0px; top:0px; -webkit-transform: rotate(45deg);}50%{left: 0px; top:0px; -webkit-transform: rotate(-45deg);}100% {left: 0px; top:0px; -webkit-transform: rotate(45deg);}}@-moz-keyframes move {0% {left:0px; top:0px; -moz-transform: rotate(45deg);}50%{left: 0px; top:0px; -moz-transform: rotate(-45deg);}100% {left: 0px; top:0px; -moz-transform: rotate(45deg);}}@-o-keyframes move{0% {left:0px; top:0px; -webkit-transform: rotate(45deg);}50%{left: 0px; top:0px; -webkit-transform: rotate(-45deg);}100% {left: 0px; top:0px; -webkit-transform: rotate(45deg);}}
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
Emlog&Wordpress 纯CSS loading特效篇&6
版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。
本文链接:http://suppore.cn/loading-6.html    百度未收录
正文到此结束

点击下方支持本站

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

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

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

评论信息框

火箭正在发射中...


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