使用一个div标签画出一个红绿灯并加上灯光切换的动画。 关键思想在于一个标签的box-shadow属性可以同时设置多个。

效果如下：

代码：

html：
{<!--warp标签是后面的蓝色背景--><div class="wrap"><div class="traffic-light"></div></div>
}css:body {margin: 0;/* 绝对定位使height: 100%生效 */position: absolute; height: 100%;width: 100%;}/* 背景图 使用margin auto实现垂直水平居中 */.wrap {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 500px;height: 350px;background: rgb(97, 170, 189);}/* 灯框架 */.traffic-light {/* 居中代码 */position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;text-align: center;/* 绘制图案 */width: 300px;height: 90px;background: #282f2f;border-radius: 50px;box-shadow: 0 0 0 2px #eee inset;}.traffic-light::after {/* 居中代码 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);content: '';display: inline-block;width: 70px;height: 70px;border-radius: 50%;animation: traffic-light 5s linear 0s infinite;}@keyframes traffic-light {from {background: transparent;  /* 黄灯 */box-shadow: -85px 0 0 0 transparent,  /* 红灯 */85px 0 0 0 transparent, /* 绿灯 */-85px 0 15px 0 transparent, /* 红灯光影 */0px 0 15px 0 transparent, /* 黄灯光影 */85px 0 15px 0 transparent; /* 绿灯光影 */}25% {background: transparent;  /* 黄灯 */box-shadow: -85px 0 0 0 rgb(247, 78, 26),  /* 红灯 */85px 0 0 0 transparent, /* 绿灯 */-85px 0 15px 0 rgb(247, 78, 26), /* 红灯光影 */0px 0 15px 0 transparent, /* 黄灯光影 */85px 0 15px 0 transparent; /* 绿灯光影 */}50% {background: rgb(231, 183, 78);  /* 黄灯 */box-shadow: -85px 0 0 0 transparent,  /* 红灯 */85px 0 0 0 transparent, /* 绿灯 */-85px 0 15px 0 transparent, /* 红灯光影 */0px 0 15px 0 rgb(231, 183, 78), /* 黄灯光影 */85px 0 15px 0 transparent; /* 绿灯光影 */}75% {background: transparent;  /* 黄灯 */box-shadow: -85px 0 0 0 transparent,  /* 红灯 */85px 0 0 0 rgb(38, 175, 84), /* 绿灯 */-85px 0 15px 0 transparent, /* 红灯光影 */0px 0 15px 0 transparent, /* 黄灯光影 */85px 0 15px 0 rgb(38, 175, 84); /* 绿灯光影 */}to {background: transparent;  /* 黄灯 */box-shadow: -85px 0 0 0 transparent,  /* 红灯 */85px 0 0 0 transparent, /* 绿灯 */-85px 0 15px 0 transparent, /* 红灯光影 */0px 0 15px 0 transparent, /* 黄灯光影 */85px 0 15px 0 transparent; /* 绿灯光影 */}}
复制代码

完整代码地址：github.com/junhaogz215…