使用纯CSS实现动态晴阴雨雪(单标签)

.cloudy:before, .rainy:before, .snowy:before { content: ""; position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #fff; border-radius: 50%; z-index: 2; }

真实的元素（真身）就是一个圆。通过box-shodow来把投影作为“分身”。

先来看看box-shadow的属性：

box-shadow: h-shadow v-shadow blur spread color inset;

参数详解：

h-shadow: 阴影的水平偏移量。

v-shadow: 阴影的垂直偏移量。

blur: 模糊距离(就是渐变的距离，设为0就没有渐变)。

spread: 投影的尺寸，通过这个控制“影分身”的大小。

color: 投影颜色，通过这个实现后方的乌云。

inset: 改为内阴影。这里用不到。

先复制一个影分身试试：

box-shadow: #fff 22px -15px 0 6px;

继续复制多个影分身，带全部影分身的完整代码如下：

.cloudy:before, .rainy:before, .snowy:before { content: ""; position: absolute; top: 50%; left: 25%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #fff; border-radius: 50%; box-shadow: #fff 22px -15px 0 6px, #fff 57px -6px 0 2px, #fff 87px 4px 0 -4px, #fff 33px 6px 0 6px, #fff 61px 6px 0 2px, #ccc 29px -23px 0 6px, #ccc 64px -14px 0 2px, #ccc 94px -4px 0 -4px; z-index: 2; }

五个分身的白圆（#fff）,三个分身的灰圆（#ccc）拼成了两朵云。

再给云朵加上“上下浮动”的动效：

.cloudy:before { animation: cloudMove 2s linear infinite; } @keyframes cloudMove { 0% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -60%); } 100% { transform: translate(-50%, -50%); } }

5 雨天

云朵的代码直接复用第4章的阴天。这里使用 :after 伪类实现雨滴。

先实现一个雨滴（为方便观看，暂时隐藏云朵）：

.rainy:after { content: ""; position: absolute; top:50%; left: 25%; width: 4px; height: 14px; background: #fff; border-radius: 2px; }

然后通过box-shadow“影分身”：

.rainy:after { content: ""; position: absolute; top:50%; left: 25%; width: 4px; height: 14px; background: #fff; border-radius: 2px; + box-shadow: + #fff 25px -10px 0, + #fff 50px 0 0, + #fff 75px -10px 0, + #fff 0 25px 0, + #fff 25px 15px 0, + #fff 50px 25px 0, + #fff 75px 15px 0, + #fff 0 50px 0, + #fff 25px 40px 0, + #fff 50px 50px 0, + #fff 75px 40px 0; }

再加入下雨的移动动效，修改如下：

.rainy:after { ...(略) + animation: rainDrop 2s linear infinite; } + @keyframes rainDrop { + 0% { + transform: translate(0, 0) rotate(10deg); + } + 100% { + transform: translate(-4px, 24px) rotate(10deg); + box-shadow: + #fff 25px -10px 0, + #fff 50px 0 0, + #fff 75px -10px 0, + #fff 0 25px 0, + #fff 25px 15px 0, + #fff 50px 25px 0, + #fff 75px 15px 0, + rgba(255, 255, 255, 0) 0 50px 0, + rgba(255, 255, 255, 0) 25px 40px 0, + rgba(255, 255, 255, 0) 50px 50px 0, + rgba(255, 255, 255, 0) 75px 40px 0; + } + }

动画添加了10度的旋转，让雨滴倾斜，以及垂直方向的移动。

这里的关键就是：虽然本质是垂直移动，但为了看上去是“循环”效果，需要将最下面的雨滴进行透明渐变，同时调节X和Y轴的值，让最终位置正好跟初始位置重合，就不会显得“断开”。

我们生成的是三行雨滴，第一行被云朵挡住了，实际能看到的是下面两行。在第一行移动到第二行位置的时候，原第三行已经透明看不见了，正好与初始状态一样，实现了无缝循环拼接。

6 雪天

雪天与雨天的区别就是把雨滴换成圆形，取消旋转角度。 代码如下：

.snowy:after { content: ""; position: absolute; top:50%; left: 25%; width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: #fff 25px -10px 0, #fff 50px 0 0, #fff 75px -10px 0, #fff 0 25px 0, #fff 25px 15px 0, #fff 50px 25px 0, #fff 75px 15px 0, #fff 0 50px 0, #fff 25px 40px 0, #fff 50px 50px 0, #fff 75px 40px 0; animation: snowDrop 2s linear infinite; } @keyframes snowDrop { 0% { transform: translateY(0); } 100% { transform: translateY(25px); box-shadow: #fff 25px -10px 0, #fff 50px 0 0, #fff 75px -10px 0, #fff 0 25px 0, #fff 25px 15px 0, #fff 50px 25px 0, #fff 75px 15px 0, rgba(255, 255, 255, 0) 0 50px 0, rgba(255, 255, 255, 0) 25px 40px 0, rgba(255, 255, 255, 0) 50px 50px 0, rgba(255, 255, 255, 0) 75px 40px 0; } }

7 全部源码

源码如下，方便粘贴保存为html：

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!