js实现雪花效果(超简单) - 好文

使用js实现雪花飘落效果，话不多说直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>snow</
title> <style> body,html{ margin: 0; padding: 0; overflow: hidden; height: 100%;
background: black; } .snow{ background: white; position: absolute; width: 20px;
height: 20px; border-radius: 50%; } </style> </head> <body> <script> //获取屏幕宽高
var windowWidth = window.screen.width; var windowHeight = window.screen.height;
//创建雪花 function createSnow(){ var left = 0; var top = 0; //定义一个初始化随机数,使雪花在屏幕中
var left_random = Math.random() * windowWidth; var top_random = Math.random()*
windowHeight;var div = document.createElement('div'); div.className = 'snow';
div.style.transform ='scale('+(Math.random())+')' document
.body.appendChild(div);//雪花飘落 setInterval(function () { div.style.left =
left_random + left +'px'; div.style.top = top_random + top +'px' left += 0.2;
top +=0.2; //如果雪花跑到屏幕外面了,让雪花重新返回屏幕顶部 if(left_random + left >= windowWidth){
left_random =Math.random(); left = 0; } if(top_random + top >= windowHeight){
top_random =Math.random(); top = 0; } },10) } for(var i = 0 ; i < 200 ; i++){
createSnow() }</script> </body> </html>
<>
实现逻辑其实很简单，动态创建若干个div设置其样式变成雪花，通过setInterval定时器控制雪花移动，当雪花跑到屏幕外面重新让雪花的left或者top为0，使雪花重新回到最左或者最上面的位置，从而实现。

<>效果预览：

热门工具换一换