下雪效果隻是一類效果的名稱，可以是紅包雨等一些自由落體的運動效果，本文就是用純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[>'#{$i}'] {
left: #{$i}vw;
}
} 這裡運用sass的循環函數來創造1到100的比對class名為animation和屬性選擇器為[>
範圍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[>'#{$key}'] {
transition-timing-function: $value;
}
} 4.3 時間
時間包含動畫運動時間和延時時間。
@for $i from 1 through 4 {
.animation[>'#{$i}'] {
animation-delay: #{$i}s;
}
}
@for $i from 4 through 8 {
.animation[>'#{$i}'] {
animation-duration: #{$i}s;
}
} 4.4 搖擺
下雪由兩個動畫組成，分别是下落fall和搖擺swing，下落的動畫是固定的，隻有搖擺需要随機，是以我自定義了屬性比對規則，就可以随機搖擺了。
@for $i from 1 through 4 {
.animation[>'#{$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);
}
}
} 5、随機性
這裡用react來示範代碼，還是那句話隻要了解了原理，語言其實并不太重要。
5.1 雪花元素
<div className='page'>
{
Array(10).fill().map((v, i) => (
<span
key={i}
className='animation span'
>{this.position()}
>{this.timing()}
>{this.delay()}
>{this.duration()}
>{this.name()}
/>
))
}
</div> 我們的雪花元素包含幾下幾個屬性值：
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)]
} 本文完〜