动态雪花飘落（冬天来了，春天还会远吗）

动态雪花飘落

雪花一片一片的飘，寄去我的思念

首先，为了方便，先引入JQuery

<script src="js/jquery.min.js"></script>

并将背景设置为黑色
开始制作雪花

var minSize=5;
var maxSize=100;
var newOn=100;
var flakeColor="#fff";
var flake=$("<div></div>").css({"position":"absolute","top":"-50px"}).html("*");
//页面加载之后
$(function(){
	var documentHeight=$(document).height();
	var documentWidth=$(document).width();
	setInterval(function(){
		var startPositionLeft=Math.random()*documentWidth;
		var startOpacity=0.7+Math.random()*0.3;
		var endPositionTop=documentHeight;
		var endPositionLeft=Math.random()*documentWidth;
		var durationFall=2000+Math.random()*3000;
		var sizeFlake=minSize+Math.random()*maxSize;
		flake.clone().appendTo("body").css({
			"left":startPositionLeft,
			"opacity":startOpacity,
			"font-size":sizeFlake,
			"color":flakeColor,
		}).animate({
			"top":endPositionTop,
			"left":endPositionLeft,
			"opacity":0.5,			
		},durationFall,function(){
			$(this).remove();
		});
	},newOn);	
});

雪花就制作完成了。

• 点赞
• 收藏
• 分享
• • 文章举报

前端小菜米 发布了2 篇原创文章 · 获赞 0 · 访问量 18 私信 关注

标签：function,春天,random,雪花,飘落,var,documentWidth,Math
来源： https://blog.csdn.net/weixin_44787934/article/details/104113344