用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 = document.createElement('div') // 创建div snowDiv.innerHTML = '"text-align: center">接下来,让元素飘落
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) }到这里就基本完成此效果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]