当前位置： 移动技术网 > IT编程>网页制作>CSS > 雪花飘落效果代码实现教程

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

2018年02月23日  | 移动技术网IT编程  | 我要评论

卫星天线论坛,牙科光固化机,战神1攻略

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

废话不多说,直接上代码

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%;
}

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网