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   百度已收录

发表评论

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