雪花飘落效果代码实现教程
程序员文章站
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%; }