【技术分享】教你给自己的网站增加动态蒲公英，让你的网站也萌动起来！

本文最后更新于2015年8月16日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

文章目录[隐藏]

首先，你需要找到自己网站的总的脚部foot文件

介绍：如图，参考本站的例子，将代码分享给感兴趣的小伙伴们。这里用的是其他大神的源代码，可根据自己网站稍微调整下。将本段代码复制到任意一个可以接受脚本的地方都可以使用。可以放在全站底部脚本代码里。

首先，你需要找到自己网站的总的脚部foot文件

<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;
right: 108px; //这边是小蒲公英显示的地方。居左：left；局右：right。自行修改。后面的参数是距边界的距离。
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://7vijc7.com1.z0.glb.clouddn.com/wp-content/uploads/2015/07/2015071806445693.png);
background–repeat: no–repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
right: 61px;//这边是大蒲公英的样式，同上。
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>