建站了這么久，之前一直嚷嚷著要給大家發(fā)點(diǎn)干貨什么的，也是一拖再拖，要知道完完整整的寫一篇教程還是很耗時間的，不僅要從自己總結(jié)經(jīng)驗(yàn)，還得吧自己的所見所得寫出來讓讀者看的懂，老夜也是個小白站長，談不上大佬只是興趣愛好而已，以后有時間會把自己會的一一分享在站內(nèi)，就當(dāng)為自己做筆記了。今天就給大家?guī)淼慕坛叹褪窃谀愕?a href="http://m.dgrundong56.cn/tag/%e7%bd%91%e7%ab%99" title="查看網(wǎng)站的所有文章" target="_blank" style="color:#555; ">網(wǎng)站左下角增加一個蒲公英特效，效果已本站為準(zhǔn)，喜歡上的可以直接加到自己的網(wǎng)站上，教程如下：

代碼一：

直接將下面的代碼添加到網(wǎng)站的</body>之前，通常都是footer.php文件中修改

<!-- 網(wǎng)站底部蒲公英特效開始 -->
 <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;
}
<!-- m.dgrundong56.cn -->
.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>
<!-- 網(wǎng)站底部蒲公英特效結(jié)束 -->

代碼二：

相對上面的代碼進(jìn)行了整理，把CSS樣式分開加載，有利于提高網(wǎng)站訪問速度

CSS代碼:

添加到網(wǎng)站主題CSS文件中，通常是main.css或者style.css文件中修改

@media screen and (max-width:600px){
 .dandelion{display: none !important;}
 }
 .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;
position: fixed;
z-index:9999999999;
bottombottom: 0px;
background-image: url(蒲公英圖片路徑地址);
background-repeat: no-repeat;
 _background: none;
 }
 .dandelion .bigdan {
width: 64px;
height: 115px;
left: 47px;
background-position: -86px -36px;
border: 0px solid red;
 }
 @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);}

再將以下代碼添加至網(wǎng)站的</body>之前

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

以上兩種方法均能在網(wǎng)站左下角實(shí)現(xiàn)蒲公英特效，最后附上代碼中需要的圖片素材。鼠標(biāo)右鍵下載，上傳至網(wǎng)站目錄，把圖片路徑或地址加到以上代碼中，修改后刷新瀏覽器緩存即可看到效果了。如有不懂之處或者建議，歡迎文章底部留言……