其他分享
首页 > 其他分享> > 一个无聊的前端工程师上厕所的时候写的雪花掉落的特效

一个无聊的前端工程师上厕所的时候写的雪花掉落的特效

作者:互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../demo1/js/jquery.min.js" ></script>
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
            *{margin: 0;padding: 0;}
            body{font-family: "微软雅黑";font-size: 14px;background: black;}
            #snow{position: relative;width: 100%;height: 100%;}
            .snow1{position: fixed;top: -50px;color: white;}
            body{ cursor: url(logoNegertive.jpg),auto;}
        </style>
    </head>
    <body>
        <div id="snow">
            
        </div>
        <script>
            $(function(){
                var minsize = 5;
                var maxsize = 30;
                var minspeed = 5000;
                var maxspeed = 10000;
                var windowheight = $(window).height();
                var windowwidth = $(window).width();
                setInterval(function(){
                    var clarity = 0.5+Math.random()*(1-0.5);
                    var sleft = Math.round(0+Math.random() * (windowwidth-0+1))
                    var size = Math.round(minsize+Math.random() * (maxsize-minsize+1))
                    // ❉ 可以更换成直接喜欢的图标
                    var snow = '<div class="snow1" style="left:'+sleft+'px;font-size:'+size+'px;opacity:'+clarity+';">❉</div>';
                    var speed = Math.round(minspeed+Math.random() * (maxspeed-minspeed+1))
                    console.log(clarity)
                    var endleft= sleft - 100 + Math.random() * 500;
                    $(snow).appendTo($("#snow")).animate({
                        top:windowheight + "px",
                        left:endleft+ "px"
                    },speed,function(){
                        $(this).remove()
                    })
                },600)
            })
        </script>
    </body>
</html>

标签:function,特效,掉落,无聊,random,snow,minsize,var,Math
来源: https://blog.csdn.net/qq_36598097/article/details/105240230