溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
下雪效果只是一類效果的名稱，可以是紅包雨等一些自由落體的運動效果，本文就是用純
css
模擬下雪的效果，更多效果大家可以自行發揮。
由于公司產品的活動，需要模擬類似下雪的效果。瀏覽器實現動畫無非
css3
和
canvas
（還有
gif
），對比下
css3
和
canvas
的優缺點：
canvas
勝；
canvas
勝；
canvas
勝；
css3
勝（
requestAnimationFrame
和硬件加速）。
由于對于性能有一定的要求，
canvas
對比
css3
會有更多的計算量導致性能可能不太好，所以選用
css3
模擬下雪效果（ps：能用
css
解決的問題就不用
javascript
解決哈哈）。
本文所采用的是
css3
的
animation
。為
dom
元素添加
animation
屬性就可以模擬動畫，例如w3school的例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>animation</title> <style> .animation{ width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; } @keyframes mymove{ from { left:0px; } to { left:200px; } } </style> </head> <body> <div></div> </body> </html>
當然這誰都會，但有個問題是，下雪并不是機械的下落，而是有快有慢、擺動幅度、時間不定，這里的重點是需要構造隨機性，理性分析下。
我們可以在css中找到這幾點隨機性的對應屬性：
position
的左右方位（動畫我們一般采用定位，因為可以減少不必要的重排和重繪）；
animation-timing-function
（提供了豐富的速度屬性）；
animation-duration
和
animation-delay
；
transform: translateX()
（在水平方向上的位移）。
可能有人會問，這幾個屬性并不是隨機的呀，并不像
Math.random
隨機函數那樣。我們換個思考方向，本文所說的隨機是隨機雪，并不是隨機雪的屬性。每個雪的下落時間、下落速度、擺動幅度是固定的，雪與雪之間的下落時間、下落速度、擺動幅度是不同，那么就達到效果了。
意識到這點，就剩下最后一個問題，怎樣給每個雪不同的下落時間、下落速度、擺動幅度呢？這里我們使用真正的隨機函數
Math.random
，利用data自定義屬性配合
Math.random
和css的屬性匹配規則，就可以確定動畫效果了。
.linear{ width: 100px; height: 100px; background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%); }
.linear{ width: 100px; height: 100px; border-radius: 50%; background-image: linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%), linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%), linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%), linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%); }
我用
sass
寫的
css
來構造動畫，其實語言無所謂，重在原理。
@for $i from 1 through 100 { .animation[data-animation-position='#{$i}'] { left: #{$i}vw; } }
這里運用
sass
的循環函數來創造1到100的匹配
class
名為
animation
和屬性選擇器為
[data-animation-position=1~100vw]
的值，例如我們想要元素的
left
為
50vw
，就直接添加
class
名
data-animation-position=50vw
。這里有兩點需要說明：
vw
：注意單位是
vw
，我們想要雪花的起始點出現在水平方向的任意位置，而
vw
是把屏幕等分為
100
份，
100vw
就是滿屏；
$timing: ( linear: linear, ease: ease, ease-in: ease-in, ease-out: ease-out, ease-in-out: ease-in-out ); @each $key, $value in $timing { .animation[data-animation-timing='#{$key}'] { transition-timing-function: $value; } }
時間包含動畫運動時間和延時時間。
@for $i from 1 through 4 { .animation[data-animation-delay='#{$i}'] { animation-delay: #{$i}s; } } @for $i from 4 through 8 { .animation[data-animation-duration='#{$i}'] { animation-duration: #{$i}s; } }
下雪由兩個動畫組成，分別是下落
fall
和搖擺
swing
，下落的動畫是固定的，只有搖擺需要隨機，所以我自定義了屬性匹配規則，就可以隨機搖擺了。
@for $i from 1 through 4 { .animation[data-animation-name='#{$i}'] { animation-name: fall, swing#{$i}; } } @for $i from 1 through 4 { @keyframes swing#{$i}{ 25% { transform: translateX(-#{$i * 10}px); } 50% { transform: translateX(#{$i * 10}px); } 75%{ transform: translateX(-#{$i * 10}px); } 100%{ transform: translateX(#{$i * 10}px); } } }
這里用
react
來演示代碼，還是那句話只要理解了原理，語言其實并不太重要。
<div className='page'> { Array(10).fill().map((v, i) => ( <span key={i} className='animation span' data-animation-position={this.position()} data-animation-timing={this.timing()} data-animation-delay={this.delay()} data-animation-duration={this.duration()} data-animation-name={this.name()} /> )) } </div>
我們的雪花元素包含幾下幾個屬性值：
data-animation-position
：起始位；
data-animation-timing
：下雪速度；
data-animation-delay
：延時；
data-animation-duration
：下雪總時間；
data-animation-name
：下落動畫和搖擺動畫。
random(min, max){ return Math.floor(Math.random() * (max - min + 1) + min) }
position(){ return this.random(1, 100) } delay(){ return this.random(1, 4) } duration(){ return this.random(4, 8) } name(){ return this.random(1, 4) } timing(){ return ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'][this.random(0, 4)] }
自己是個做了幾年全棧開發的老碼農，如果你對前端開發這門技術感興趣，這里推薦一下我的前端學習交流群： 767273102 ，里面都是學習前端的從最基礎的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移動端HTML5的項目實戰的資料都有整理，送給每一位前端小伙伴。最新技術，與企業需求同步。好友都在里面學習交流，每天都會有大牛定時講解前端技術!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
