本期分享一下如何仅用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绘制一个内六角形。这就变成了一个简单的初中几何问题。
