用js實(shí)現(xiàn)漂亮的雪花飄過效果：

步驟：

頁面基本樣式，雪花旋轉(zhuǎn)動(dòng)畫效果

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); }}

創(chuàng)建雪花，添加樣式

let snowDiv = document.createElement(’div’) // 創(chuàng)建divsnowDiv.innerHTML = ’❉’ // 添加❉內(nèi)容snowDiv.className = ’snowAnimation’ // 添加旋轉(zhuǎn)動(dòng)畫snowDiv.style.position = ’absolute’snowDiv.style.top = ’0’snowDiv.style.left = ’0’snowDiv.style.color = ’#fff’document.body.append(snowDiv) // 插入到頁面

接下來，讓元素飄落

animated(snowDiv) // 傳入創(chuàng)建的元素// 動(dòng)態(tài)增加元素top值，function animated(div) { div.timer = setInterval(() => { div.style.top = 10 + div.offsetTop + ’px’ },50)}

接下來，給元素添加隨機(jī)生成的初始化效果

let minSize = 10 // 生成的最小元素let maxSize = 50 // 生成的最大元素let randomOpacity = 0.5 + Math.random()*0.5 // 生成元素的不透明度snowDiv.style.fontSize = minSize + Math.random()*maxSize + ’px’ // 元素隨機(jī)大小snowDiv.style.opacity = randomOpacity // 元素隨機(jī)的不透明度

下一步，添加生成元素的隨機(jī)位置，并且保持可視區(qū)域內(nèi)活動(dòng)

let visualWidth = document.body.offsetWidth || document.documentElement.offsetWidth // 頁面可視化寬度let visualHeight = document.body.offsetHeight || document.documentElement.offsetHeight // 頁面可視化高度let initPosition = Math.random()*(visualWidth - 80) // 溢出會(huì)有滾動(dòng)條，控制不會(huì)溢出，頁面可視化寬度 - (元素最大寬度 + 最大寬度/2)snowDiv.style.left = initPosition + ’px’ // 隨機(jī)在可視化區(qū)域位置內(nèi)生成元素animated(snowDiv,visualHeight) // 傳入創(chuàng)建的元素// 動(dòng)態(tài)增加元素top值，當(dāng)元素超過可視化區(qū)域，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)}

基本完成：生成一個(gè)隨機(jī)大小/不透明度的元素，并且在可視化區(qū)域內(nèi)飄落

下一步，復(fù)制生成多個(gè)元素：cloneNode()

let minSize = 10 // 生成的最小元素let maxSize = 50 // 生成的最大元素let delay = 100 // 生成元素的間隔時(shí)間let snowDiv = document.createElement(’div’) // 創(chuàng)建divsnowDiv.innerHTML = ’❉’ // 添加❉內(nèi)容snowDiv.className = ’snowAnimation’ // 添加旋轉(zhuǎn)動(dòng)畫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) // 溢出會(huì)有滾動(dòng)條，控制不會(huì)溢出，頁面可視化寬度 - (元素最大寬度 + 最大寬度/2) let randomOpacity = 0.5 + Math.random()*0.5 // 生成元素的不透明度 let speed = 5 + Math.random()*5 // 元素飄落速度 snowDiv.style.fontSize = minSize + Math.random()*maxSize + ’px’ // 元素隨機(jī)大小 snowDiv.style.opacity = randomOpacity // 元素隨機(jī)的不透明度 snowDiv.style.left = initPosition + ’px’ // 隨機(jī)在可視化區(qū)域位置內(nèi)生成元素 let div = snowDiv.cloneNode(true) // 復(fù)制元素 document.body.append(div) // 添加復(fù)制后的元素 animated(div,speed,visualHeight) // 傳入創(chuàng)建的元素，飄落的速度以及頁面可視化高度},delay)// 動(dòng)態(tài)增加元素top值，當(dāng)元素超過可視化區(qū)域，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)}

到這里就基本完成此效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。