js实现雪花飘落效果

比眉伴天荒 2023-02-13 05:50 97阅读 0赞

## js实现雪花飘落效果 ##

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

1.  我们先看看主体的 HTML 代码

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 代码**。

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

--------------------

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

[Link 1]: http://www.sharekong.xyz/res/xuehua/xue.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527181904342.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkwOTI4,size_16,color_FFFFFF,t_70