js实现雪花飘落效果

js实现雪花飘落效果

我们可以先看看效果
点这里 雪花
雪花飘落其实总的代码都不到 100 行,代码很少,因此 css 样式 和 js 代码我都放在一个 HTML 文件里面了

  1. 我们先看看主体的 HTML 代码
 <body>
		<div id="xh"></div>
</body>

html 的代码就只有一行

  1. 我们再看看 css 的样式
body {
				background-color: black;
		}
		
		#xh {
			position: relative;
		}
		
		.xue {
			position: absolute;
			display: inline-block;
			/* opacity: .7; */
			outline: none;
			border: none;
			animation: xuehua 5s infinite linear;
		}
		
		.xue:hover {
			cursor: pointer;
			animation-play-state: paused;
			opacity: 1;
		}
		
		@keyframes xuehua{
			from{
				opacity: 1;
				transform: translate(0, 0) rotate(0deg);
			}
			to{
				opacity: 0;
				transform: translate(0, 700px) rotateZ(720deg) rotateY(720deg) scale(1.5);
			}
		}

HTML 中唯一的 div#xh 给它设为 相对定位 relative ,便于它的子元素雪花定位。.xue 这个类设置为 绝对定位 absolute,便于改变它的 top 值,这个就不用多讲了吧。最主要的是 xuehua 这个动画,刚开始它的透明度设置为 1,慢慢地过渡到 0 ,位置也是从初始位置慢慢地往下移动,rotate 表示变换,边下落边变换。

  1. 现在我们来看看最主要的 js 代码
<script type="text/javascript">
		
		var xh = document.getElementById("xh");
		/// 屏幕宽度
		var dWidth = document.body.scrollWidth;
		var dHeight = window.innerHeight;
		var setXH = setInterval(function(){production();}, 100);
		
		xh.style.height = dHeight;
		
		function production()
		{
			var t1 = document.createElement("div");
			/// left 和 top 最大值
			/// left 减掉 100 是为了不产生横行的滑动条
			var t1Left = Math.floor(Math.random() * dWidth) - 100;
			var t1Top = Math.floor(Math.random() * 10);
			
			t1.style.left = t1Left + "px";
			t1.style.top = t1Top + "px";
			t1.style.display = "inline-block";
			t1.innerText = "❉";
			t1.style.color = "white";
			t1.classList.add("xue");
			/// 将生成的雪花加入到 div 下面去
			xh.appendChild(t1);
			
			setInterval(function(){
				t1.remove();
			}, 5000);
		}
	</script>

在这里我大概的思路是这样的
1. 获取到一个容器(也就是HTML中的唯一一个div),保存到 xh 变量中
2. 获取屏幕的宽度(用于让雪花随机从不同的位置下落)
3. 设置一个计时器(用于产生雪花),我这里是每 100 毫秒产生一个 雪花
4. production 这个函数主要是产生雪花,里面的各种设置雪花的参数我就不一一介绍了。里面我用到了随机函数 random(),其作用就是让雪花下落的位置不同。然后参数设置好的雪花加入到div下面去(appendChild)
5. 最后我又设置了一个计时器,作用是每过 5000 毫秒(也就是 5s)就让移除一个雪花


雪花飘落的大致实现过程就是这样啦,要是哪位大佬有什么指导可以直接留言哦,很感谢你们提出的意见呢。大家有什么创意也可以留言哦,这也是提升的一种方法呢
哪个朋友想要源码可以留下邮箱,我直接发给你哦
最后祝大家身体健康~~~~

个人博客 http://www.sharekong.xyz 欢迎访问

  • 6
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值