樂于分享
好東西不私藏

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.mreevv.tw -->
.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文件中修改

@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);}

再將以下代碼添加至網站的</body>之前

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

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

 

 

本站文章均為手工撰寫未經允許謝絕轉載:夜雨聆風 » WordPress教程:給你的網站加個蒲公英特效
支付寶掃碼打賞 微信打賞

如果文章對您有幫助,歡迎移至上方按鈕打賞……

評論 1

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址

  1. #1

    闊以的

    走走聽聽丶2年前 (2018-06-11)Windows NT | Chrome 64.0.3282.140回復
×
訂閱圖標按鈕
羽毛球馆地板