<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标点击烟花</title>
    <style>
        /* 设置css样式 */
        body {
            background: #000;
            overflow: hidden;
        }
        .fire {
            position: absolute;
            width: 4px;
            height: 30px;
        }
    </style>
 
</head>
    <div class="fire"></div>
 
<body>
    <script>
        //给页面设置点击事件
        document.onclick = function (eve) {
            var e = eve || window.event;
            //设置一个空数组,用来后面存放小烟花
            var arr = [];
            //获取鼠标点击的位置
            var x = e.clientX;
            var y = e.clientY;
            //设置步长
            var speed = 20;
            //生成大烟花,设置他的css样式,出发点在可视区页面的下方
            var fire = document.createElement('div');
            fire.className = 'fire';
            // randomColor随机颜色小脚本
            fire.style.background = randomColor();
            fire.style.left = x + 'px';
            fire.style.top = document.documentElement.clientHeight + 'px';
            //将大烟花追加到页面上
            document.body.appendChild(fire);
            //生成定时器
            var t = setInterval(function () {
            //判断如果大烟花的TOP值小于小于目标值,清除定时器,并且将大烟花清除
                if (fire.offsetTop <= y) {
                    clearInterval(t);
                    document.body.removeChild(fire);
                    //执行show(生成小烟花)
                    show();
                }
                //让大烟花垂直向上运动
                fire.style.top = fire.offsetTop - speed + 'px';
            }, 30);
 
            function show() {
                //利用循环,生成50个小烟花,给小烟花添加css属性
                for (var i = 0; i < 50; i++) {
                    var sFire = document.createElement('div');
                    // sFire.className = 'small-fire';
                    sFire.style.left = x + 'px';
                    sFire.style.top = y + 'px';
                    // 心形背景
                    // sFire.style.background = randomColor();
                    sFire.style.color = randomColor();
                    sFire.innerHTML = '❤';
                    sFire.style.position = 'absolute';
                    //生成随机数
                    var a = Math.random() * 360;
                    sFire.sx = Math.sin(a * 180 / Math.PI) * 20 * Math.random();
                    sFire.sy = Math.cos(a * 180 / Math.PI) * 20 * Math.random();
                    //将小烟花追加到页面上
                    document.body.appendChild(sFire);
                    //将生成的烟花信息都添加到数组中
                    arr.push(sFire);
                }
            }
            setInterval(function move() {
                //利用循环一直改变小烟花的位置
                for (var i = 0; i < arr.length; i++) {
                    //设置将每次循环的第i个小烟花的运动范围
                    arr[i].style.left = arr[i].offsetLeft + arr[i].sx + 'px';
                    arr[i].style.top = arr[i].offsetTop + arr[i].sy + 'px';
                    //让烟花垂直方向的位置每次都增加,实现下落效果
                    arr[i].sy += 1;
                    //判断烟花是否运动出屏幕可视区,如果是,就将它删除
                    // clientHeigh = height + 上下padding 
                    //  clientWidth = width+左右padding
                    // Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）
                    if (arr[i].offsetLeft < 0 || arr[i].offsetLeft > document.documentElement.clientWidth ||
                        arr[i].offsetTop > document.documentElement.clientHeight) {
                        document.body.removeChild(arr[i]);
                        // arr.splice(i,1);
                    }
                }
            }, 30)
        }
        // 范围随机数
        function random(max, min) {
            return Math.round(Math.random() * (max - min) + min);
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";
        }
    </script>
</body>

</html>

#google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
font-size: 14px!important;
}
#home {
opacity: 0.80;
margin: 0 auto;
width: 85%;
min-width: 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "Comic Sans MS";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
}
#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
width: 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{ 
display: none !important;
}
body {
color: #000;
background: url(https://images.cnblogs.com/cnblogs_com/blogs/805808/galleries/2351884/o_231017111418_R-C.jpg) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#topics .postTitle {
border: 0px;
font-size: 200%;
font-weight: bold;
float: left;
line-height: 1.5;
width: 100%;
padding-left: 5px;
}
div.commentform p{
margin-bottom:10px;
}
.comment_btn {
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
width: 90px;
border: 0 none;
border-radius: 5px;
background: #258fb8;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:0;
font-size:24px;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
.commentbox_title {
width: 100%;
}
#tbCommentBody {
font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
margin-top:10px;
max-width:100%;
min-width:100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:14px;
min-height:120px;
}
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}

#blog-comments-placeholder, #comment_form {
padding: 20px;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
margin-bottom: 50px;
}
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}


<script type="text/javascript">
   window.onload = function () {
                var minSize = 15; //最小字体
                var maxSize = 30;//最大字体
                var newOne = 600; //生成雪花间隔
                var flakColor = "#1bd3ff"; //雪花颜色
                var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("❉");//定义一个雪花
                var dhight = $(window).height(); //定义视图高度
                var dw =$(window).width()-80; //定义视图宽度
                setInterval(function(){
                var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花
                var startLeft = Math.random()*dw; //雪花生成是随机的left值
                var startOpacity = 0.7+Math.random()*0.3; //随机透明度
                var endTop= dhight-100; //雪花停止top的位置
                var endLeft= Math.random()*dw; //雪花停止的left位置
                var durationfull = 5000+Math.random()*3000; //雪花飘落速度不同
                flak.clone().appendTo($("body")).css({
                "left":startLeft ,
                "opacity":startOpacity,
                "font-size":sizeflak,
                "color":flakColor
                }).animate({
                "top":endTop,
                "left":endLeft,
                "apacity":0.1
                },durationfull,function(){
                $(this).remove()
                });
                },newOne);
            }
 </script>