前言

气温骤降，寒风凛冽，这个冬天终于冷起来了，冬天既然来都来了，怎么能没有雪呢，南方的小伙伴不乐意了！看我巴啦啦能量，乌卡拉卡，落~

动画14.gif

正文

言归正传，我们怎么样用纯CSS实现如上动画效果呢？

box-shadow加上animation，再加上一点点想象力~

首先我们先来重新认识一下今天的主角box-shadow

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。 --【参考MDN】

box-shadow可多个阴影叠加使用，且如果元素同时设置了 border-radius 属性，那么阴影也会有圆角效果。那么由此可知我们将元素设置为 border-radius：50% ，长宽相同，那么阴影也会是个圆，同时扩散半径默认0，颜色默认继承元素的颜色，我们就可以得到了第一个小雪点，同样的道理，复制多个阴影，改变它的X 轴偏移量、Y 轴偏移量，就得到了许许多多的小雪点啦，再配合 animation ，改变阴影的偏移量，就得到了一个类似下雪的动画了。

核心代码：

<div class="text">
    <span style="--anitime: 4s;--delaytime: 0.5s;--content:'巴';"></span>
    <span style="--anitime: 4.25s;--delaytime: 0.5s;--content:'啦';"></span>
    <span style="--anitime: 5.5s;--delaytime: 0.5s;--content:'啦';"></span>
    <span style="--anitime: 3.2s;--delaytime: 0.5s;--content:'能';"></span>
    <span style="--anitime: 3s;--delaytime: 0.5s;--content:'量';"></span>
    <span style="--anitime: 4.5s;--delaytime: 0.5s;--content:'乌';"></span>
    <span style="--anitime: 3.8s;--delaytime: 0.5s;--content:'卡';"></span>
    <span style="--anitime: 3.35s;--delaytime: 0.5s;--content:'拉';"></span>
    <span style="--anitime: 2.7s;--delaytime: 0.5s;--content:'卡';"></span>
</div>

.text span::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    top: 100%;
    left: 0;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px;
    animation: snow var(--anitime) linear var(--delaytime) infinite;
    opacity: 0.8;
  }
 @keyframes snow {
        0% {
          transform: translateY(0);
          opacity: 0;
          box-shadow: 0px 0px, 5px 0px transparent, 10px 20px transparent, 15px 0px transparent,
                      0px 0px, 5px 0px transparent, 10px 20px transparent, 15px 0px transparent,
                      0px 0px transparent, 5px 0px transparent, 10px 20px transparent, 15px 0px transparent,
                      0px 0px transparent, 5px 0px transparent, 10px 20px transparent, 15px 0px transparent,
                      0px 0px transparent, 5px 0px transparent, 10px 20px transparent, 15px 0px transparent,
                      0px 0px transparent, 5px 0px transparent, 10px 20px transparent, 15px 0px transparent;
        }
        ...
        100% {
            ...
        }
      }

【完整代码】

写在最后

本文结束，希望对你有所帮助，有错望指正，必改，轻喷~

天气真冷，我来给大家下个雪吧...

前言

正文

写在最后