Emlog为网站左下角添加一个蒲公英效果

  • 内容
  • 相关

Emlog为网站左下角添加一个蒲公英效果

DIV代码

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

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(https://www.mom1.cn/wp-content/uploads/2017/07/251.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);}
   }

本文标签:这篇文章木有标签

版权声明:若无特殊注明,本文皆为《枫叶》原创,转载请保留文章出处。

本文链接:https://www.maple5.com/technology/658.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注