纯CSS实现雪花飘落效果

2021-01-09

前几天看到了这一篇文章, 纯CSS来实现这种还算比较复杂的动画, 感觉蛮有意思的, 就打算自己跟着写一个 Dome 跑起来看看
纯css模拟下雪效果
我这使用的是React + Less, 会更原文有很多差异, 但是思路都是一样的.

CSS绘制雪花

利用CSS多条线性渐变既可以

.snowflake{
  width: 10px;
  height: 10px;
  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%);
}

飘落效果

上下直接使用相对定位就行, 左右动画使用 translateX 就很方便的, 主要还是随机方面比较麻烦, 原文很多东西都直接使用SCSS的循环来做, 我觉得完全没必要, 不是必要的我还是喜欢直接用行内样式, MVVM模式渲染不会增大加载速度的

一些随机的准备

interface snowItemProps {
  position?: number,
  delay?: number,
  duration?: number,
  name?: number,
  timing?: string
}

const random = (min:number, max:number):number =>  Math.floor(Math.random() * (max - min + 1) + min)

const position = ():number => random(1, 100)
const delay = ():number=> random(1, 4)
const duration = ():number => random(4, 8)
const name = ():number => random(1, 4)
const timing = ():string=> ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'][random(0, 4)]

雪花组件

const SnowFlake = ({ position, delay, duration, name, timing }:snowItemProps) => {
  const style = { left: position + 'vw', animationName: 'fall,snow'+name, animationDuration: duration + 's', animationDelay: delay +'s', animationTimingFunction: timing }
  return <div style={ style } className="snowflake" />
}

然后直接使用Array.map直接渲染出100个雪花, 然后加上飘落的CSS样式, 雪花就可以起飞了

1	Array(100).fill(0).map((v, i)=><SnowFlake key={i} position={position()} delay={delay()} duration={duration()} name={name()} timing={timing()} />)

上下动画

@keyframes fall {
  25% { top: 0 }
  100%{ top: 100vh }
}

左右横跳

.loop(@i) when (@i <= 4){
  @snowname: ~'snow@{i}';
  @keyframes @snowname {
    25% {
      transform: translateX(-(@i * 10px));
    }
    50% {
      transform: translateX((@i * 10px));
    }
    75%{
      transform: translateX(-(@i * 10px));
    }
    100%{
      transform: translateX((@i * 10px));
    }
  });
  .loop(@i+1);

}

.loop(1);

然后给雪花加上定位样式就可以直接好了

.

这雪花是飘起来了, 但是丑还是有点丑, 然后有点肉眼可见的生硬感. 感觉这种比较复杂的动画还是交给canvas来做会好一点.