动态雪花飘落(冬天来了,春天还会远吗)

动态雪花飘落

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

首先,为了方便,先引入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);	
});

雪花就制作完成了。

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值