共計 1691 個字符，預計需要花費 5 分鐘才能閱讀完成。

網頁左下角有一個蒲公英飄動特效，相信很多站長都見過，為此，橘子君也做了一番研究，實現蒲公英飄動特效還是比較簡單。只需在網頁中加入以下代碼即可實現。如果是想全站展示，建議將特效代碼添加到 footer 文件中。

蒲公英特效代碼

<!-- 蒲公英特效 -->
    <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: 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: 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(https://mat1.gtimg.com/www/mb/images/zt/memory/pgy.png);
    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);}
    }
    </style>

PS：在電腦上可以點擊運行進入預覽，群聊時博主見過很多新手站長說一看到代碼就頭疼，就會覺得很復雜，其實現在的互聯網如此開放，很多工作不再是敲代碼了，借力互聯網，給網頁加代碼也是一件比較簡單的事了。