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

2017年7月18日23:41:03 3 1,225

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

代码

  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{displaynone !important;}
  3.    }
  4.        .dandelion .smalldan {
  5. width36px;
  6. height60px;
  7. left21px;
  8. background-position: 0 -90px;
  9. border0px 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. displayblock;
  21. positionfixed;
  22. z-index:9999999999;
  23. bottombottom0px;
  24. background-imageurl(https://www.mom1.cn/wp-content/uploads/2017/07/251.png);
  25. background-repeatno-repeat;
  26.    _background: none;
  27.    }
  28.    .dandelion .bigdan {
  29. width64px;
  30. height115px;
  31. left47px;
  32. background-position: -86px -36px;
  33. border0px 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:

目前评论:3   其中:访客  3   博主  0

    • avatar 艾小七 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省 移动 1

      恩好看

      • avatar 自留地 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省 移动 2

        教程不错,简单一个效果,代码这么长

        • avatar 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信 1

          你的防盗链成功的拦着我了。