分享本站底部蒲公英飘动特效源码给大家


眼尖的你使用宽度大于800PX的设备访问本站的时候
肯定发现了本站左侧底部的蒲公英飘动,这个特效是不是很有感觉
带给你夏至将去,秋风将来的感觉,如果你?#19981;兌部?#20197;给自己的博客DIY上这个特效

<div class="dandelion">
  <span class="smalldan"></span>
  <span class="bigdan"></span>
</div>
<style type="text/css">
@media screen and (max-width:600px){
.dandelion{display: none !important;}
}
 .dandelion .smalldan {
width: 36px;
height: 60px;
left: 88px;   
background-position: 0 -90px;
border: 0px solid red;
}
.dandelion span {
-webkit-animation: ball-x 3s linear 2s infinite;
 -moz-animation: ball-x 3s linear 2s infinite;
 animation: ball-x 3s linear 2s infinite;
-webkit-transform-origin: bottom center;
 -moz-transform-origin: bottom center;
 transform-origin: bottom center;
}
.dandelion span {
display: block;
position: fixed;
z-index:9999999999;
bottom: 0px;
background-image: url(http://cdn.txiaohe.cn/images/pugongying.png);
background-repeat: no-repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
left: 41px;
background-position: -86px -36px;
border: 0px solid red;
}
@keyframes ball-x {
 0% { transform:rotate(0deg);}
 25% { transform:rotate(5deg); }
 50% { transform:rotate(0deg);}
 75% { transform:rotate(-5deg);}
 100% { transform:rotate(0deg);}  
}
@-webkit-keyframes ball-x {
 0% { -webkit-transform:rotate(0deg);}
 25% { -webkit-transform:rotate(5deg); }
 50% { -webkit-transform:rotate(0deg);}
 75% { -webkit-transform:rotate(-5deg);}
 100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
 0% { -moz-transform:rotate(0deg);}
 25% { -moz-transform:rotate(5deg); }
 50% { -moz-transform:rotate(0deg);}
 75% { -moz-transform:rotate(-5deg);}
 100% { -moz-transform:rotate(0deg);}
}
</style>

本博客所有文章如无特别注明均为原创——作者:小和 复制或转载请以超链接形式注明转自 小和博客
原文地址《分享本站底部蒲公英飘动特效源码给大家
分享到:更多

相关推荐

网友评论(2)

蒲公英看着挺漂亮的。
themebetter 4年前 (2016-07-01) 回复
@themebetter:对呀,?#19981;?#23601;拿去用吧
小和 4年前 (2016-07-01) 回复