溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 = 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)
}感謝各位的閱讀！看完上述內容，你們對JS如何實現炫酷雪花飄落效果的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
