单标签！纯CSS实现动态晴阴雨雪

1 引言

本期分享一下如何仅用CSS3，实现单标签的动态晴阴雨雪。技术关键点就是“单标签”和“纯CSS”。先看下最终效果：

再看看HTML代码：

<div class="weather sunny"></div>



<div class="weather cloudy"></div>



<div class="weather rainy"></div>



<div class="weather snowy"></div>

没错，就是这么任性，每个动图就一个标签，而且无图无JS！下面就来详细介绍下技术实现。

涉及到的关键CSS3属性：

transform：用于移位、旋转、缩放效果

box-shadow：利用投影实现图像的复制(关键！)

clip-path：基于绘制的形状对元素进行遮罩处理

animation：设置元素的动画

以及实现单标签最关键的:before、:after伪元素运用。

通过本期分享，能学到什么？

最大的一点就是：box-shadow的另类玩法——“影分身”。

下面开始逐个讲解。

2 基础背景

图中的蓝块背景区域，很基础了，不用讲了。

设置了区域的宽高、背景色和圆角效果。

.weather {

    position: relative;

    display: inline-block;

    width: 180px;

    height: 240px;

    background: #23b7e5;

    border-radius: 8px;

}

3 晴天

晴天图标由两个元素组成：太阳和内六角形阳光。

:before、:after 两个伪元素可以在元素内部分别“添加”一个元素，正好都利用上了。

3.1 绘制太阳

首先，用 :before实现太阳。

.sunny:before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 60px;

    height: 60px;

    background: #F6D963;

    border-radius: 50%;

    box-shadow: 0 0 20px #ff0;

    z-index: 2;

}

content用来生成一个元素。

position、top、left、transform用来实现中心居中。

box-shadow实现外发光效果，这只是box-shadow最基本最常用的使用方式。

3.2 绘制内六角形

用 :after实现内六角形。

实现的关键就是使用遮罩。通过clip-path绘制一个内六角形。这就变成了一个简单的初中几何问题。

内六角形由两个等边三角形拼合而成。

合并之后，我们可以把整体划分为若干个完全相同的小等边三角形。

在垂直方向做个辅助线，连接中间顶部和底部两点。不难发现，“垂直方向的最大长度”要大于“水平方向的最大长度”。

设小等边三角形的边长为1，以内六角形中心为坐标原点，可以计算出每个点的坐标，如下：

为了使用clip-path的百分比定位来绘制图像，下一步需要把长度坐标转换为百分比坐标。

设垂直方向最大长度为100%，仍以内六角形中心为坐标原点，每个点的坐标值转换如下：

由于clip-path绘制原点是在左上角，x轴右侧为正值，y轴下方为正值。需要做下坐标系转换。即：

新x轴坐标值 = 旧x轴坐标值 + 50%

新y轴坐标值 = (旧y轴坐标值 - 50%) * -1

使用clip-path的polygon方法绘制内六角形，坐标已通过上面的步骤计算出来了。

样式代码如下：

.sunny:after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -45px 0 0 -45px;

    width: 90px;

    height: 90px;

    background: #FFEB3B;

    clip-path: polygon(

        50% 0%,

        64.43% 25%,

        93.3% 25%,

        78.87% 50%,

        93.3% 75%,

        64.43% 75%,

        50% 100%,

        35.57% 75%,

        6.7% 75%,

        21.13% 50%,

        6.7% 25%,

        35.57% 25%);

    z-index: 1;

    animation: sunScale 2s linear infinite;

}

@keyframes sunScale {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.1);

}

    100% {

        transform: scale(1);

    }

}

※注：safari需要将clip-path改为-webkit-clip-path。由于代码太占篇幅，这里就不重复写两遍了。

实现原理就是通过clip-path绘制了一个内六角形遮罩，把黄颜色背景通过遮罩变成了最终的内六角形。

animation通过关键帧动画实现了“放大缩小”交替动效。

最终效果：

4 阴天

观察图形发现，有两个云朵：前面的白云和后面的乌云。貌似需要分别用 :before和 :after实现。如果这样做的话，后续章节的雨天和雪天的雨雪元素就没有多余的伪元素可用了。所以只能用一个伪元素实现两朵云。这里就用到了box-shadow的“影分身”了！

由于后续章节的雨天和雪天都复用了云的样式，所以写在一起了，代码如下：

.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：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>单标签！纯CSS实现动态晴阴雨雪</title>

</head>

<body>

    <div class="weather sunny"></div>

    <div class="weather cloudy"></div>

    <div class="weather rainy"></div>

    <div class="weather snowy"></div>

</body>

<style>

.weather {

    position: relative;

    display: inline-block;

    width: 180px;

    height: 240px;

    background: #23b7e5;

    border-radius: 8px;

}

.sunny:before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 60px;

    height: 60px;

    background: #F6D963;

    border-radius: 50%;

    box-shadow: 0 0 20px #ff0;

    z-index: 2;

}

.sunny:after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -45px 0 0 -45px;

    width: 90px;

    height: 90px;

    background: #FFEB3B;

    clip-path: polygon(

            50% 0%,

            64.43% 25%,

            93.3% 25%,

            78.87% 50%,

            93.3% 75%,

            64.43% 75%,

            50% 100%,

            35.57% 75%,

            6.7% 75%,

            21.13% 50%,

            6.7% 25%,

            35.57% 25%

    );

    z-index: 1;

    animation: sunScale 2s linear infinite;

}

@keyframes sunScale {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.1);

    }

    100% {

        transform: scale(1);

    }

}

.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;

}

.cloudy:before {

    animation: cloudMove 2s linear infinite;

}

@keyframes cloudMove {

    0% {

        transform: translate(-50%, -50%);

    }

    50% {

        transform: translate(-50%, -60%);

    }

    100% {

        transform: translate(-50%, -50%);

    }

}

.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;

    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;

    }

}

.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;

    }

}

</style>

</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,033评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,725评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,473评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,846评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,848评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,691评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,053评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,700评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,856评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,676评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,787评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,430评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,034评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,990评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,218评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,174评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,526评论 2赞 343