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

  • A+
所属分类：技术教程 WORDPRESS教程

代码

  1. <div class="dandelion">
  2.         <span class="smalldan"></span>
  3.         <span class="bigdan"></span>
  4.     </div>

CSS

  1. @media screen and (max-width:600px){
  2.    .dandelion{display: none !important;}
  3.    }
  4.        .dandelion .smalldan {
  5. width: 36px;
  6. height: 60px;
  7. left: 21px;
  8. background-position: 0 -90px;
  9. border: 0px solid red;
  10.    }
  11.    .dandelion span {
  12.    -webkit-animation: ball-x 3s linear 2s infinite;
  13.      -moz-animation: ball-x 3s linear 2s infinite;
  14.      animation: ball-x 3s linear 2s infinite;
  15.    -webkit-transform-origin: bottombottom center;
  16.      -moz-transform-origin: bottombottom center;
  17.      transform-origin: bottombottom center;
  18.    }
  19.    .dandelion span {
  20. display: block;
  21. position: fixed;
  22. z-index:9999999999;
  23. bottombottom: 0px;
  24. background-image: url(https://www.mom1.cn/wp-content/uploads/2017/07/251.png);
  25. background-repeat: no-repeat;
  26.    _background: none;
  27.    }
  28.    .dandelion .bigdan {
  29. width: 64px;
  30. height: 115px;
  31. left: 47px;
  32. background-position: -86px -36px;
  33. border: 0px solid red;
  34.    }
  35.    @keyframes ball-x {
  36.        0% { transform:rotate(0deg);}
  37.       20% { transform:rotate(5deg); }
  38.       40% { transform:rotate(0deg);}
  39.       60% { transform:rotate(-5deg);}
  40.       80% { transform:rotate(0deg);}
  41.       100% { transform:rotate(0deg);}
  42.    }
  43.    @-webkit-keyframes ball-x {
  44.        0% { -webkit-transform:rotate(0deg);}
  45.       20% { -webkit-transform:rotate(5deg); }
  46.       40% { -webkit-transform:rotate(0deg);}
  47.       60% { -webkit-transform:rotate(-5deg);}
  48.       80% { -webkit-transform:rotate(0deg);}
  49.       100% { -webkit-transform:rotate(0deg);}
  50.    }
  51.    @-moz-keyframes ball-x {
  52.        0% { -moz-transform:rotate(0deg);}
  53.       20% { -moz-transform:rotate(5deg); }
  54.       40% { -moz-transform:rotate(0deg);}
  55.       60% { -moz-transform:rotate(-5deg);}
  56.       80% { -moz-transform:rotate(0deg);}
  57.       100% { -moz-transform:rotate(0deg);}
  58.    }

   代码添加到主题页脚 footer.php，css添加到样式表 style.css。
黄 先森

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: