给博客左下角添加蒲公英特效以及鼠标点出小心心特效

没事就爱瞎折腾，虽然是一个后端开发，但是自己的网站总不能找别人来写样式或者其他的东西吧。送上一个适合放在网站或者博客左下角的特效，有点文艺范，以及鼠标点出小心心js特效。

sstext = "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;  
            }  
            requestAnimationFrame(gameloop);  
        }  
        function attachEvent(){  
            var old = typeof window.onclick==="function" && window.onclick;  
            window.onclick = function(event){  
                old && old();  
                createHeart(event);  
            }  
        }  
        function createHeart(event){  
            var d = document.createElement("div");  
            d.className = "heart";  
            hearts.push({  
                el : d,x : event.clientX - 5,y : event.clientY - 5,scale : 1,alpha : 1,color : randomColor()  
            });  
            document.body.appendChild(d);  
        }  
        function css(css){  
            var style = document.createElement("style");  
            style.type="text/css";  
            try{  
                style.appendChild(document.createTextNode(css));  
            }catch(ex){  
                style.styleSheet.csstext = css;  
            }  
            document.getElementsByTagName('head')[0].appendChild(style);  
        }  
        function randomColor(){  
            return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";  
        }  
    })(window,document);  
 

• 左下角蒲公英特效 图可以更换不一定为蒲公英 自己喜欢就好 将下面两个连一起就可以了 为了让代码高亮这个有点作用 就分开写了

PHP">//左下角蒲公英特效
dandelion">
　　
　　

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://qq52o.me/wp-content/uploads/2017/10/2017102108422347.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);}  
    } 
  

最后再啰嗦一句，自取合适所用，本博客没有使用，蒲公英的这个pc端显示合适，但是移动端就不显示了，放在主题文件footer.PHP中的body标签内就可以了，没什么技术含量