wordpress左下角添加蒲公英特效

原创 Laughing  2017-10-18 10:38  阅读 512 次 评论 2 条
没什么技术含量,可以把一下代码复制到footer.phpbody标签内
  1. <script type="text/javascript">  
  2.     (function(window,document,undefined){  
  3.         var hearts = [];  
  4.         window.requestAnimationFrame = (function(){  
  5.             return window.requestAnimationFrame ||  
  6.                 window.webkitRequestAnimationFrame ||  
  7.                 window.mozRequestAnimationFrame ||  
  8.                 window.oRequestAnimationFrame ||  
  9.                 window.msRequestAnimationFrame ||  
  10.                 function (callback){  
  11.                     setTimeout(callback,1000/60);  
  12.                 }  
  13.         })();  
  14.         init();  
  15.         function init(){  
  16.             css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");  
  17.             attachEvent();  
  18.             gameloop();  
  19.         }  
  20.         function gameloop(){  
  21.             for(var i=0;i<hearts.length;i++){  
  22.                 if(hearts[i].alpha <=0){  
  23.                     document.body.removeChild(hearts[i].el);  
  24.                     hearts.splice(i,1);  
  25.                     continue;  
  26.                 }  
  27.                 hearts[i].y--;  
  28.                 hearts[i].scale += 0.004;  
  29.                 hearts[i].alpha -= 0.013;  
  30.                 hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;  
  31.             }  
  32.             requestAnimationFrame(gameloop);  
  33.         }  
  34.         function attachEvent(){  
  35.             var old = typeof window.onclick==="function" && window.onclick;  
  36.             window.onclick = function(event){  
  37.                 old && old();  
  38.                 createHeart(event);  
  39.             }  
  40.         }  
  41.         function createHeart(event){  
  42.             var d = document.createElement("div");  
  43.             d.className = "heart";  
  44.             hearts.push({  
  45.                 el : d,  
  46.                 x : event.clientX - 5,  
  47.                 y : event.clientY - 5,  
  48.                 scale : 1,  
  49.                 alpha : 1,  
  50.                 color : randomColor()  
  51.             });  
  52.             document.body.appendChild(d);  
  53.         }  
  54.         function css(css){  
  55.             var style = document.createElement("style");  
  56.             style.type="text/css";  
  57.             try{  
  58.                 style.appendChild(document.createTextNode(css));  
  59.             }catch(ex){  
  60.                 style.styleSheet.cssText = css;  
  61.             }  
  62.             document.getElementsByTagName('head')[0].appendChild(style);  
  63.         }  
  64.         function randomColor(){  
  65.             return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";  
  66.         }  
  67.     })(window,document);  
  68. </script>  
  69.   
  70.   
  71. <div class="dandelion">  
  72.         <span class="smalldan"></span>  
  73.         <span class="bigdan"></span>  
  74.     </div>  
  75.        
  76.     <style type="text/css">  
  77.     @media screen and (max-width:600px){  
  78.     .dandelion{display: none !important;}  
  79.     }  
  80.         .dandelion .smalldan {  
  81.     width: 36px;  
  82.     height: 60px;  
  83.     left: 21px;  
  84.     background-position: 0 -90px;  
  85.     border: 0px solid red;  
  86.     }  
  87.     .dandelion span {  
  88.     -webkit-animation: ball-x 3s linear 2s infinite;  
  89.       -moz-animation: ball-x 3s linear 2s infinite;  
  90.       animation: ball-x 3s linear 2s infinite;  
  91.     -webkit-transform-origin: bottom center;  
  92.       -moz-transform-origin: bottom center;  
  93.       transform-origin: bottom center;  
  94.     }  
  95.     .dandelion span {  
  96.     display: block;  
  97.     position: fixed;  
  98.     z-index:9999999999;  
  99.     bottom: 0px;  
  100.     background-image: url(https://www.lisen.me/wp-content/uploads/2017/10/pgy.png);  
  101.     background-repeat: no-repeat;  
  102.     _background: none;  
  103.     }  
  104.     .dandelion .bigdan {  
  105.     width: 64px;  
  106.     height: 115px;  
  107.     left: 47px;  
  108.     background-position: -86px -36px;  
  109.     border: 0px solid red;  
  110.     }  
  111.     @keyframes ball-x {  
  112.         0% { transform:rotate(0deg);}  
  113.        20% { transform:rotate(5deg); }  
  114.        40% { transform:rotate(0deg);}  
  115.        60% { transform:rotate(-5deg);}  
  116.        80% { transform:rotate(0deg);}  
  117.        100% { transform:rotate(0deg);}  
  118.     }  
  119.     @-webkit-keyframes ball-x {  
  120.         0% { -webkit-transform:rotate(0deg);}  
  121.        20% { -webkit-transform:rotate(5deg); }  
  122.        40% { -webkit-transform:rotate(0deg);}  
  123.        60% { -webkit-transform:rotate(-5deg);}  
  124.        80% { -webkit-transform:rotate(0deg);}  
  125.        100% { -webkit-transform:rotate(0deg);}  
  126.     }  
  127.     @-moz-keyframes ball-x {  
  128.         0% { -moz-transform:rotate(0deg);}  
  129.        20% { -moz-transform:rotate(5deg); }  
  130.        40% { -moz-transform:rotate(0deg);}  
  131.        60% { -moz-transform:rotate(-5deg);}  
  132.        80% { -moz-transform:rotate(0deg);}  
  133.        100% { -moz-transform:rotate(0deg);}  
  134.     }  
  135.     </style>  
本文地址:https://www.lisen.me/wordpress-add-dandelion-effect-in-the-lower-left-corner.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. 小李
    小李 【农民】 @回复

    好东西