下雪效果只是一类效果的名称，可以是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果，更多效果大家可以自行发挥。


1.前言

由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还有gif），对比下css3和canvas的优缺点：

动画自由度：canvas胜；复杂度：canvas胜；兼容性：canvas胜；性能：css3胜（requestAnimationFrame和硬件加速）。

由于对于性能有一定的要求，canvas对比css3会有更多的计算量导致性能可能不太好，所以选用css3模拟下雪效果（ps：能用css解决的问题就不用javascript解决哈哈）。

2.原理

本文所采用的是css3的animation。为dom元素添加animation属性就可以模拟动画，例如w3school的例子：

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>animation</title><style>.animation{width:100px;height:100px;background:red;position:relative;animation:mymove5sinfinite;-webkit-animation:mymove5sinfinite;}@keyframesmymove{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,green40%,red40%,red60%,green60%);}3.2 多条线性渐变画雪花


.linear{width:100px;height:100px;border-radius:50%;background-image:linear-gradient(0,rgba(255,255,255,0)40%,#fff40%,#fff60%,rgba(255,255,255,0)60%),linear-gradient(45deg,rgba(255,255,255,0)43%,#fff43%,#fff57%,rgba(255,255,255,0)57%),linear-gradient(90deg,rgba(255,255,255,0)40%,#fff40%,#fff60%,rgba(255,255,255,0)60%),linear-gradient(135deg,rgba(255,255,255,0)43%,#fff43%,#fff57%,rgba(255,255,255,0)57%);}4.构造下雪动画

我用sass写的css来构造动画，其实语言无所谓，重在原理。

4.1 起始点

@for$ifrom1through100{.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,$valuein$timing{.animation[data-animation-timing='#{$key}']{transition-timing-function:$value;}}4.3 时间

时间包含动画运动时间和延时时间。

@for$ifrom1through4{.animation[data-animation-delay='#{$i}']{animation-delay:#{$i}s;}}@for$ifrom4through8{.animation[data-animation-duration='#{$i}']{animation-duration:#{$i}s;}}4.4 摇摆

下雪由两个动画组成，分别是下落fall和摇摆swing，下落的动画是固定的，只有摇摆需要随机，所以我自定义了属性匹配规则，就可以随机摇摆了。

@for$ifrom1through4{.animation[data-animation-name='#{$i}']{animation-name:fall,swing#{$i};}}@for$ifrom1through4{@keyframesswing#{$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 雪花元素

<divclassName='page'>{Array(10).fill().map((v,i)=>(<spankey={i}className='animationspan'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){returnMath.floor(Math.random()*(max-min+1)+min)}5.2 属性随机赋值

position(){returnthis.random(1,100)}delay(){returnthis.random(1,4)}duration(){returnthis.random(4,8)}name(){returnthis.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的项目实战的资料都有整理，送给每一位前端小伙伴。最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!