每日一篇系列---CSS3实现下雨动效

今日份笔记，下雨动效。
先前实现类似的天气动效，都是麻烦UI大佬给做的图，这次使用CSS3来实现一个。

一、准备工作
首先介绍下实现主要会用到的CSS3属性：box-shadow
box-shadow主要有以下几个参数：

1、inset
阴影的扩散方向，简单来说就是设置内阴影，如果不写，默认是外阴影；

2、	<offset-x> | <offset-y>
设置水平/垂直方向的偏移量，就是设置阴影的位置；

3、<blur-radius>
模糊半径，就是设置扩散阴影的虚化程度，模糊面积越大，阴影就越大越淡。不能为负值，默认值为0；

4、<spread-radius>
取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。

5、<color>
阴影的色值，不设定的时候由浏览器决定色值，chrome默认是黑色， Safari是透明。

box-shaodw支持设置多值，所以可以连写。

二、实现思路
我们要实现一个?的动效，首先需要具备两个主要的元素：云跟雨。那我们就分成两部分来完成。
在开始实现之前，我们先定义一个容器，用来放云雨的位置：

<div class=" w-rain"></div>

好，只要一个div就足够了，至于云跟雨，我们可以使用伪类元素来实现。
首先我们看下☁️怎么实现。我们先定义伪类元素before来放置云：

.w-rain::before {
	content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
}

到这个位置，我们先画出一个圆。而我们最后需要画成这样：

可以看到，这朵云主要组成部分是白云跟乌云部分，形状上主要是圆形的叠加，所以，我们只要利用boxshadow对初始的圆进行变换位移，就可以得到这个效果：

.w-cloud {
	...
	box-shadow: 20px -20px 0 12px #fff,  // X轴偏移，Y轴偏移，阴影模糊度，阴影，阴影色值
	60px -10px 0 6px #fff, 
	35px -10px 0 15px #fff, 
	25px -25px 0 12px #d2d2d2, 
	65px -15px 0 6px #d2d2d2, 
	40px -15px 0 15px #d2d2d2;
}

加上这段代码之后，就可以看到这朵云了。
第二步，我们来实现雨。雨的形状很简单，就是一个两头圆的矩形：

跟云的实现一样，雨点也可以使用box-shadow的偏移特性来实现：

.w-rain {
	content: '';
      display: block;
      width: 4px;
      height: 10px;
      background: #fff;
      border-radius: 2px;
      position: absolute;
      top: 30px;
      left: 30px;
      box-shadow: 
        10px 10px 0 0 #fff, 
        20px 0px 0 0 #fff, 
        30px 10px 0 0 #fff,
        0 15px 0 0 #fff,
        10px 25px 0 #fff,
        20px 15px 0 #fff,
        30px 25px 0 #fff,
        0 30px 0 0 #fff,
        10px 40px 0 #fff,
        20px 30px 0 #fff,
        30px 40px 0 #fff;
}

因为风的因素，雨下下来是有角度的，所以我们需要给它们设置偏移量：

.w-rain {
	...
    transform: rotate(10deg);
    transform-origin: 50% 50%; // 默认旋转是以左上角为原点，这里我们设置雨点的中心点
}

这样我们的雨点也就实现了。注意：上面的代码使用了定位，把雨点定位到云朵的下面。
接下来，我们需要让雨点动起来，这个就需要使用到animation以及@keyframes属性。

.w-rain {
	...
	animation: rain 1s linear infinite;
}

@keyframes rain {
  0% {
    transform: rotate(10deg) translateY(0);
  }
  100% {
    transform: rotate(10deg) translateY(15px); // 设置位移
    box-shadow: 10px 10px 0 0 #fff, 
    20px 0px 0 0 #fff, 
    30px 10px 0 0 #fff,
    0 15px 0 0 #fff,
    10px 25px 0 #fff,
    20px 15px 0 #fff,
    30px 25px 0 #fff,
    0 30px 0 0 rgba(255,255,255,0), // 把最后一排设置透明渐变，实现连续的效果
    10px 40px 0 rgba(255,255,255,0),
    20px 30px 0 rgba(255,255,255,0),
    30px 40px 0 rgba(255,255,255,0);
  }
}

如此一来，我们最终的云雨动效就实现完成啦~