htmljs满屏飘雪特效,JS实现炫酷雪花飘落效果⽤js实现漂亮的雪花飘过效果：
步骤：
页⾯基本样式，雪花旋转动画效果
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);
}
}
创建雪花，添加样式
let snowDiv = ateElement('div') // 创建div snowDiv.innerHTML = '❉' // 添加❉内容
snowDiv.className = 'snowAnimation' // 添加旋转动画snowDiv.style.position = 'absolute'
p = '0'
snowDiv.style.left = '0'
lor = '#fff'
document.body.append(snowDiv) // 插⼊到页⾯
接下来，让元素飘落
animated(snowDiv) // 传⼊创建的元素
// 动态增加元素top值，
function animated(div) {
div.timer = setInterval(() => {
p = 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(() => {
p = 10 + div.offsetTop + 'px'
if (Number(p.replace('px','')) > visualHeight - 80) {
clearInterval(div.timer)
veChild(div)
}
},50)
}
基本完成：⽣成⼀个随机⼤⼩/不透明度的元素，并且在可视化区域内飘落
下⼀步，复制⽣成多个元素：cloneNode()
let minSize = 10 // ⽣成的最⼩元素
let maxSize = 50 // ⽣成的最⼤元素
let delay = 100 // ⽣成元素的间隔时间
let snowDiv = ateElement('div') // 创建div
snowDiv.innerHTML = '❉' // 添加❉内容
snowDiv.className = 'snowAnimation' // 添加旋转动画
snowDiv.style.position = 'absolute'
p = '0'
snowDiv.style.left = '0'
lor = '#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(() => {
p = speed + div.offsetTop + 'px'
if (Number(p.replace('px','')) > visualHeight - 80) {
clearInterval(div.timer)实现特效的代码js
veChild(div)
}
},50)
}
到这⾥就基本完成此效果。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。