Puock主题已经正式发售,一款颜值在线的多功能WordPress主题,赶快戳我来看看吧

本站底部蒲公英飘动特效分享

6,659次阅读
31条评论

前言

眼尖的你使用宽度大于800PX的设备访问本站的时候,肯定发现了本站左侧底部的蒲公英飘动,这个特效是不是很有感觉,带给你夏至将去,秋风将来的感觉。如果你喜欢也可以给自己的博客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(图片地址);
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>

[v_tips]请下载图片附件,然后将代码中的“图片地址”改成图片对应URL。[/v_tips]

附件下载

 文件名称:蒲公英
 文件大小:7.8KB
 下载声明:本站部分资源来自于网络收集,若侵犯了你的隐私或版权,请及时联系我们删除有关信息。
 下载地址:http://pan.baidu.com/s/1nu7i9br 密码:nj77

10
憧憬Licoy
版权声明:本站原创文章,由憧憬Licoy于2016年06月17日发表,共计1952字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(31条评论)
Loading...
郝哥 评论达人LV.1
2019-10-11 16:37:27 回复

好的收到

路人 评论达人LV.1
2017-02-07 23:58:45 回复

加在主题哪个文章呢

boke112导航 评论达人LV.1
2016-12-08 12:40:40 回复

适当的特效还是挺好的,不过现在好像贵站底部已经没有这个特效了吧

明月登楼的博客 评论达人LV.2
2016-11-02 18:13:27 回复

以前我也有这个,后来感觉审美疲劳就去掉了!

杨泽业博客 评论达人LV.1
2016-09-14 00:06:37 回复

我的弄上去了,并且发布了一个文章,注明了来源网址,就是你这个页面哦!