本文详细讲解如何使用 JavaScript 结合 CSS3 实现炫酷的雪花飘落特效。通过动态创建 DOM 元素，利用 setInterval 控制下落位置，并引入随机大小、透明度及旋转动画，确保雪花在可视区域内自然生成与消失，最终通过 cloneNode 批量复制实现丰富的视觉效果。
雪花飘落效果实现概述
本文将介绍如何使用 JavaScript 实现一个美观的雪花飘落动画效果。
具体实现步骤如下：
基础样式与旋转动画定义
首先，需要设置页面的基础样式，并定义雪花的旋转动画效果。
body{
width: 100vw;
height: 100vh;
background-color: #000;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.snowAnimation {
animation: snow 5s infinite linear;
-webkit-animation: snow 5s infinite linear;
}
@keyframes snow {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
@-webkit-keyframes snow {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}雪花元素创建与样式添加
接着，在 JavaScript 中创建雪花元素，并为其添加相应的样式类。
let snowDiv = document.createElement('div') // 创建div
snowDiv.innerHTML = '❉' // 添加❉内容
snowDiv.className = 'snowAnimation' // 添加旋转动画
snowDiv.style.position = 'absolute'
snowDiv.style.top = '0'
snowDiv.style.left = '0'
snowDiv.style.color = '#fff'
document.body.append(snowDiv) // 插入到页面
下落运动逻辑实现
随后，编写逻辑使雪花元素产生下落运动。
animated(snowDiv) // 传入创建的元素
// 动态增加元素top值，
function animated(div) {
div.timer = setInterval(() => {
div.style.top = 10 + div.offsetTop + 'px'
},50)
}随机初始化效果处理
接下来，为生成的雪花元素添加随机初始化的视觉效果，如大小和透明度。
let minSize = 10 // 生成的最小元素
let maxSize = 50 // 生成的最大元素
let randomOpacity = 0.5 + Math.random()*0.5 // 生成元素的不透明度
snowDiv.style.fontSize = minSize + Math.random()*maxSize + 'px' // 元素随机大小
snowDiv.style.opacity = randomOpacity // 元素随机的不透明度可视区域位置控制与边界处理
然后，确定生成元素的随机水平位置，并确保其始终保持在可视窗口范围内活动。
let visualWidth = document.body.offsetWidth || document.documentElement.offsetWidth // 页面可视化宽度
let visualHeight = document.body.offsetHeight || document.documentElement.offsetHeight // 页面可视化高度
let initPosition = Math.random()*(visualWidth - 80) // 溢出会有滚动条，控制不会溢出，页面可视化宽度 - (元素最大宽度 + 最大宽度/2)
snowDiv.style.left = initPosition + 'px' // 随机在可视化区域位置内生成元素
animated(snowDiv,visualHeight) // 传入创建的元素
// 动态增加元素top值，当元素超过可视化区域，remove元素
function animated(div,visualHeight) {
div.timer = setInterval(() => {
div.style.top = 10 + div.offsetTop + 'px'
if (Number(div.style.top.replace('px','')) > visualHeight - 80) {
clearInterval(div.timer)
document.body.removeChild(div)
}
},50)
}此时，基础功能已基本完成：生成具有随机大小和不透明度的元素，并在可视区域内进行飘落动画。
批量生成多个雪花元素
为了增强视觉效果，下一步是批量生成多个雪花元素，这里可以使用 cloneNode() 方法。
let minSize = 10 // 生成的最小元素
let maxSize = 50 // 生成的最大元素
let delay = 100 // 生成元素的间隔时间
let snowDiv = document.createElement('div') // 创建div
snowDiv.innerHTML = '❉' // 添加❉内容
snowDiv.className = 'snowAnimation' // 添加旋转动画
snowDiv.style.position = 'absolute'
snowDiv.style.top = '0'
snowDiv.style.left = '0'
snowDiv.style.color = '#fff'
let visualWidth = document.body.offsetWidth || document.documentElement.offsetWidth // 页面可视化宽度
let visualHeight = document.body.offsetHeight || document.documentElement.offsetHeight // 页面可视化高度
setInterval(() => {
let initPosition = Math.random()*(visualWidth - 80) // 溢出会有滚动条，控制不会溢出，页面可视化宽度 - (元素最大宽度 + 最大宽度/2)
let randomOpacity = 0.5 + Math.random()*0.5 // 生成元素的不透明度
let speed = 5 + Math.random()*5 // 元素飘落速度
snowDiv.style.fontSize = minSize + Math.random()*maxSize + 'px' // 元素随机大小
snowDiv.style.opacity = randomOpacity // 元素随机的不透明度
snowDiv.style.left = initPosition + 'px' // 随机在可视化区域位置内生成元素
let div = snowDiv.cloneNode(true) // 复制元素
document.body.append(div) // 添加复制后的元素
animated(div,speed,visualHeight) // 传入创建的元素，飘落的速度以及页面可视化高度
},delay)
// 动态增加元素top值，当元素超过可视化区域，remove元素
function animated(div,speed,visualHeight) {
div.timer = setInterval(() => {
div.style.top = speed + div.offsetTop + 'px'
if (Number(div.style.top.replace('px','')) > visualHeight - 80) {
clearInterval(div.timer)
document.body.removeChild(div)
}
},50)
}至此，该雪花飘落效果的核心逻辑已基本实现。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。