JS实现炫酷雪花飘落效果
用js实现漂亮的雪花飘过效果：
步骤：
页面基本样式，雪花旋转动画效果
body{
width:100vw;
height:100vh;
background-color:#000;
overflow:hidden;
user-select:none;
-webkit-user-select:none;
}
.snowAnimation{
animation:snow5sinfinitelinear;
-webkit-animation:snow5sinfinitelinear;
}
@keyframessnow{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
@-webkit-keyframessnow{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
创建雪花，添加样式
letsnowDiv=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值，
functionanimated(div){
div.timer=setInterval(()=>{
div.style.top=10+div.offsetTop+'px'
},50)
}
接下来，给元素添加随机生成的初始化效果
letminSize=10//生成的最小元素 letmaxSize=50//生成的最大元素 letrandomOpacity=0.5+Math.random()*0.5//生成元素的不透明度 snowDiv.style.fontSize=minSize+Math.random()*maxSize+'px'//元素随机大小 snowDiv.style.opacity=randomOpacity//元素随机的不透明度
下一步，添加生成元素的随机位置，并且保持可视区域内活动
letvisualWidth=document.body.offsetWidth||document.documentElement.offsetWidth//页面可视化宽度
letvisualHeight=document.body.offsetHeight||document.documentElement.offsetHeight//页面可视化高度
letinitPosition=Math.random()*(visualWidth-80)//溢出会有滚动条，控制不会溢出，页面可视化宽度-(元素最大宽度+最大宽度/2)
snowDiv.style.left=initPosition+'px'//随机在可视化区域位置内生成元素
animated(snowDiv,visualHeight)//传入创建的元素
//动态增加元素top值，当元素超过可视化区域，remove元素
functionanimated(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()
letminSize=10//生成的最小元素
letmaxSize=50//生成的最大元素
letdelay=100//生成元素的间隔时间
letsnowDiv=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'
letvisualWidth=document.body.offsetWidth||document.documentElement.offsetWidth//页面可视化宽度
letvisualHeight=document.body.offsetHeight||document.documentElement.offsetHeight//页面可视化高度
setInterval(()=>{
letinitPosition=Math.random()*(visualWidth-80)//溢出会有滚动条，控制不会溢出，页面可视化宽度-(元素最大宽度+最大宽度/2)
letrandomOpacity=0.5+Math.random()*0.5//生成元素的不透明度
letspeed=5+Math.random()*5//元素飘落速度
snowDiv.style.fontSize=minSize+Math.random()*maxSize+'px'//元素随机大小
snowDiv.style.opacity=randomOpacity//元素随机的不透明度
snowDiv.style.left=initPosition+'px'//随机在可视化区域位置内生成元素
letdiv=snowDiv.cloneNode(true)//复制元素
document.body.append(div)//添加复制后的元素
animated(div,speed,visualHeight)//传入创建的元素，飘落的速度以及页面可视化高度
},delay)
//动态增加元素top值，当元素超过可视化区域，remove元素
functionanimated(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)
}
到这里就基本完成此效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。