WordPress博客美化：给你的网站加个蒲公英特效

本文为转载，喜欢的可以试试，先看看效果图：

方法一： 直接将下面的代码添加到网站的</body>之前，通常都是footer.php文件中修改

<!-- 网站底部蒲公英特效开始 -->
 <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;
}
<!-- www.yeyulingfeng.com -->
.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>
<!-- 网站底部蒲公英特效结束 -->

方法二：相对上面的代码进行了整理，把CSS样式分开加载，有利于提高网站访问速度

CSS代码--添加到网站主题CSS文件中，通常是main.css或者style.css文件中修改

/*左下角蒲公英*/
.dandelion .smalldan {
 width: 36px;
 height: 60px;
 left: 21px;
 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: bottombottom center;
 -moz-transform-origin: bottombottom center;
 transform-origin: bottombottom center;
}
.dandelion span {
 display: block;bottom:0px;
 position: fixed;
 z-index:9999999999;
 bottombottom: 0px;
 background-image: url(img/pugongying.png);
 background-repeat: no-repeat;
 _background: none;
}
.dandelion .bigdan {
 width: 64px;
 height: 115px;
 left: 47px;
 background-position: -86px -36px;
 border: 0px solid red;
}
@media screen and (max-width:600px){
 .dandelion{display: none !important;}
}
@keyframes ball-x {
 0% { transform:rotate(0deg);}
 20% { transform:rotate(5deg); }
 40% { transform:rotate(0deg);}
 60% { transform:rotate(-5deg);}
 80% { transform:rotate(0deg);}
 100% { transform:rotate(0deg);}
}
@-webkit-keyframes ball-x {
 0% { -webkit-transform:rotate(0deg);}
 20% { -webkit-transform:rotate(5deg); }
 40% { -webkit-transform:rotate(0deg);}
 60% { -webkit-transform:rotate(-5deg);}
 80% { -webkit-transform:rotate(0deg);}
 100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
 0% { -moz-transform:rotate(0deg);}
 20% { -moz-transform:rotate(5deg); }
 40% { -moz-transform:rotate(0deg);}
 60% { -moz-transform:rotate(-5deg);}
 80% { -moz-transform:rotate(0deg);}
 100% { -moz-transform:rotate(0deg);}
}

再将以下代码添加至网站的</body>之前

<div class="dandelion">
 <span class="smalldan"></span>
 <span class="bigdan"></span>
 </div>

以上两种方法均能在网站左下角实现蒲公英特效，最后附上代码中需要的图片素材。鼠标右键下载，上传至网站目录，把图片路径或地址加到以上代码中，修改后刷新浏览器缓存即可看到效果了。

原文转载：传送门