为你的网站左下角添加蒲公英特效。

本文最后更新于2020.11.09-22:39，某些文章具有时效性，若有错误或已失效，请在下方评论留言或联系博主。

 当然图片可以更换不一定为蒲公英 ，可以放自己喜欢的图片，使用时记得把URL换成自己的地址。

使用方法：

把下面的代码放到 footer.php的</ body>之前即可。

/*左下角蒲公英特效*/
<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://www.9izy.net/wp-content/themes/vieu/static/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;  
    }  
    @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> 
<div class="dandelion">
　　<span class="smalldan"></span>
　　<span class="bigdan"></span>
</div>

【效果展示】：