纯css模拟下雪效果

时间 2019-11-09

标签 css 模拟下雪效果栏目 CSS 繁體版

原文原文链接

效果如其名，想必都见过下雪（可能南方人除外哈哈），但下雪效果只是一类效果的名称，能够是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果。javascript

1.前言

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

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

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

附上地址java

2.原理

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

<!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 class="animation"></div>
</body>
</html>
复制代码

固然这谁都会，但有个问题是，下雪并非机械的下落，而是有快有慢、摆动幅度、时间不定，这里的重点是须要构造随机性，理性分析下。css3

在浏览器中下雪的起始点随机;
下雪的速度随机;
下雪从开始到落到地面的时间随机（延时随机和整个下雪过程的时间随机）;
下雪过程当中摇摆随机。

咱们能够在css中找到这几点随机性的对应属性：git

起始点：position的左右方位（动画咱们通常采用定位，由于能够减小没必要要的重排和重绘）；
速度：animation-timing-function（提供了丰富的速度属性）；
时间：animation-duration和animation-delay；
摇摆：transform: translateX()（在水平方向上的位移）。

可能有人会问，这几个属性并非随机的呀，并不像Math.random随机函数那样。咱们换个思考方向，本文所说的随机是随机雪，并非随机雪的属性。每一个雪的下落时间、下落速度、摆动幅度是固定的，雪与雪之间的下落时间、下落速度、摆动幅度是不一样，那么就达到效果了。github

意识到这点，就剩下最后一个问题，怎样给每一个雪不一样的下落时间、下落速度、摆动幅度呢？这里咱们使用真正的随机函数Math.random，利用data自定义属性配合Math.random和css的属性匹配规则，就能够肯定动画效果了。web

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来构造动画，其实语言无所谓，重在原理。canvas

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);
    }
  }
}
复制代码

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)]
}
复制代码

6.总结

张鑫旭的鑫三无准则：无宽度、无图片和无浮动。

我我的以为若是非要加上第四无，能够是 无js 哈哈（开玩笑）。随着css的发展，其领域可谓很广很深而且也不可或缺，不少时候若是css运用的比较好的话，会节省不少时间和js代码的，整个功能实现的难度都会降低，互勉互勉。

1. 强大的CSS：模拟下雪效果动画制作教程
2. 纯粹CSS效果~
3. 纯css loadding效果
4. 下雪效果
5. Unity利用粒子系统模拟下雪积雪效果
6. 导航效果（纯CSS版）
7. 纯css实现scrollview效果
8. 纯css制作loading效果
9. 下雪了-js下雪效果
10. 雪花特效---纯css实现
更多相关文章...
• SVG 模糊效果 - SVG 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 委托模式
• Docker容器实战(七) - 容器眼光下的文件系统