下雪效果只是一類效果的名稱，可以是紅包雨等一些自由落體的運動效果，本文就是用純css模擬下雪的效果，更多效果大家可以自行發揮。
1.前言
由於公司產品的活動，需要模擬類似下雪的效果。瀏覽器實現動畫無非css3和canvas（還有gif），對比下css3和canvas的優缺點：
動畫自由度：canvas勝；
復雜度：canvas勝；
兼容性：canvas勝；
性能：css3勝（requestAnimationFrame和硬件加速）。
由於對於性能有一定的要求，canvas對比css3會有更多的計算量導致性能可能不太好，所以選用css3模擬下雪效果（ps：能用css解決的問題就不用JavaScript解決哈哈）。
2.原理
本文所采用的是css3的animation。為dom元素添加animation屬性就可以模擬動畫，例如w3school的例子：
<!DOCTYPE html> <html lang="en"> <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的屬性匹配規則，就可以確定動畫效果了。
3.構造雪形狀
3.1 一條線性漸變
.linear{ width: 100px; height: 100px; background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%); } 3.2 多條線性漸變畫雪花
.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%); }
4.構造下雪動畫
我用sass寫的css來構造動畫，其實語言無所謂，重在原理。
4.1 起始點
@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。這里有兩點需要說明：
- 范圍1~100vw：注意單位是vw，我們想要雪花的起始點出現在水平方向的任意位置，而vw是把屏幕等分為100份，100vw就是滿屏；
- 為什么要把1～100都循環出來：只有這樣才能匹配到范圍內我們需要的值。
4.2 速度
$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; } } 4.3 時間
時間包含動畫運動時間和延時時間。
@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; } } 4.4 搖擺
下雪由兩個動畫組成，分別是下落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); } } }廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com
5.隨機性
這里用react來演示代碼，還是那句話只要理解了原理，語言其實並不太重要。
5.1 雪花元素
<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：下落動畫和搖擺動畫。
5.1 隨機范圍函數
random(min, max){
return Math.floor(Math.random() * (max - min + 1) + min) } 5.2 屬性隨機賦值
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)] }