首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给博客左下角添加蒲公英特效以及鼠标点出小心心特效

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

作者头像
沈唁
发布2018-05-24 15:42:08
7450
发布2018-05-24 15:42:08
举报
文章被收录于专栏:沈唁志沈唁志

没事就爱瞎折腾,高级 js 课程也学的差不多了,虽然是一个后端开发,但是自己的网站总不能找别人来写样式或者其他的东西吧。日常维护添加还要是自己的,不忘初心,不能忘记建立博客的目的是什么,送上一个适合放在网站或者博客左下角的特效,有点文艺范,以及鼠标点出小心心 js 特效。

//鼠标点击特效
<script type="text/javascript"> 
    (function(window,document,undefined){  
        var hearts = [];  
        window.requestAnimationFrame = (function(){  
            return window.requestAnimationFrame ||  
                window.webkitRequestAnimationFrame ||  
                window.mozRequestAnimationFrame ||  
                window.oRequestAnimationFrame ||  
                window.msRequestAnimationFrame ||  
                function (callback){  
                    setTimeout(callback,1000/60);  
                }  
        })();  
        init();  
        function init(){  
            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;}");  
            attachEvent();  
            gameloop();  
        }  
        function gameloop(){  
            for(var i=0;i<hearts.length;i++){  
                if(hearts[i].alpha <=0){  
                    document.body.removeChild(hearts[i].el);  
                    hearts.splice(i,1);  
                    continue;  
                }  
                hearts[i].y--;  
                hearts[i].scale += 0.004;  
                hearts[i].alpha -= 0.013;  
                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;  
            }  
            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);  
</script> 
  • 左下角蒲公英特效 图可以更换不一定为蒲公英 自己喜欢就好 将下面两个连一起就可以了 为了让代码高亮这个Prism.js有点作用 就分开写了
//左下角蒲公英特效
<div class="dandelion">
  <span class="smalldan"></span>
  <span class="bigdan"></span>
</div>
<style type="text/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: 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);}  
    } 
 </style> 

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

沈唁志|一个PHPer的成长之路! 原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:给博客左下角添加蒲公英特效以及鼠标点出小心心特效

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-10-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档