用js实现漂亮的雪花飘过效果：
步骤：
页面基本样式，雪花旋转动画效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
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); }} |
创建雪花，添加样式
|
1
2
3
4
5
6
7
8
|
let snowDiv = document.createElement('div') // 创建divsnowDiv.innerHTML = '❉' // 添加❉内容snowDiv.className = 'snowAnimation' // 添加旋转动画snowDiv.style.position = 'absolute'snowDiv.style.top = '0'snowDiv.style.left = '0'snowDiv.style.color = '#fff'document.body.append(snowDiv) // 插入到页面 |
接下来，让元素飘落
|
1
2
3
4
5
6
7
8
|
animated(snowDiv) // 传入创建的元素// 动态增加元素top值，function animated(div) { div.timer = setInterval(() => { div.style.top = 10 + div.offsetTop + 'px' },50)} |
接下来，给元素添加随机生成的初始化效果
|
1
2
3
4
5
6
|
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 // 元素随机的不透明度 |
下一步，添加生成元素的随机位置，并且保持可视区域内活动
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
let minSize = 10 // 生成的最小元素let maxSize = 50 // 生成的最大元素let delay = 100 // 生成元素的间隔时间let snowDiv = document.createElement('div') // 创建divsnowDiv.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)} |
到这里就基本完成此效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/Vue2018/article/details/100011133
