乐于分享
好资源不私藏

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

 当然图片可以更换不一定为蒲公英 ,可以放自己喜欢的图片,使用时记得把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>

 

【效果展示】:

 

未经允许不得转载:9i资源网 » 为你的网站左下角添加蒲公英特效。

评论 抢沙发

评论前必须登录!

立即登录   注册

×
订阅图标按钮