欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

雪花飘落效果代码实现教程

程序员文章站 2022-08-10 15:20:09
冬季,关于雪的东西就多了起来,最近写代码经常会用到雪花飘飘的效果,今天整理了出来。 废话不多说,直接上代码 var flakeColor = "#fff"...

冬季,关于雪的东西就多了起来,最近写代码经常会用到雪花飘飘的效果,今天整理了出来。

废话不多说,直接上代码

var flakeColor = "#fff"; //雪花的颜色
    var newOn = 500; //间隔多长时间产生一个雪花
    var flake = $("<p></p>").css("position", "absolute").html('<img src= "image/snow.png">');//雪花图片
    $(function() {
        setInterval(function() {
            var documentWidth = $(document).width(); //获取浏览器的宽度
            var documentHeight = $(document).height();
            var startLeft = Math.random() * documentWidth; //雪花开始时距离浏览器的left
            var endLeft = Math.random() * documentWidth; //雪花下落后距离浏览器的left
            var flakeSize = Math.random() * 5; //雪花随机的大小
            var startOpacity = 0.7 + 0.3 * Math.random() //雪花一开始的透明度
            var endOpacity = 0.4 + 0.3 * Math.random() //雪花下落后的透明度
            var durationTime = 4000 + 6000 * Math.random() //雪花下落的时间
            flake.clone().appendTo($("body")).css({
                "left": startLeft,
                "color": flakeColor,
                "top": "-55px",
                "width": flakeSize + "%",
                "opacity": startOpacity
            }).animate({
                "left": endLeft,
                "top": documentHeight,
                "opacity": startOpacity
            }, durationTime, function() {
                $(this).remove();
            });
        }, newOn);
    })

提示:

基于jquery,不要忘记引入哦~

css的一些代码

body{
    background: #000;
    overflow: hidden;
}
img{
    display: block;
    width: 100%;
}