本站底部蒲公英飘动特效分享 – 高海燕的个人主页

前言

眼尖的你使用宽度大于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(/html/图片地址);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>

</div>

@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(/html/图片地址);

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>

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

附件下载

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

发表评论取消回复

目前评论：31 其中：访客 28 博主 3

郝哥 0 浙江省绍兴市联通
回复 2019年10月11日下午4:37 11楼

好的收到

路人 0 中国移动
回复 2017年02月07日下午11:58 12楼

加在主题哪个文章呢
- 憧憬Licoy 博主陕西省宝鸡市网宿科技电信CDN节点
  回复 2017年02月09日下午6:14 1层
  
  @路人全局顶部或者底部

boke112导航 3 广西南宁市电信
回复 2016年12月08日下午12:40 13楼

适当的特效还是挺好的，不过现在好像贵站底部已经没有这个特效了吧
- 憧憬Licoy 博主四川省电信
  回复 2016年12月08日下午5:23 1层
  
  @boke112导航是的，换了主题就去除掉了