[分享]css3怎样制作红绿灯

CSS3可以用来实现各种各样的效果，包括制作红绿灯。下面我们就来看看如何使用CSS3来实现红绿灯。

/* 定义灯的样式 */
.light {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 10px;
  box-shadow: 0px 0px 5px #333;
}

/* 定义红灯样式 */
.red {
  background-color: red;
}

/* 定义黄灯样式 */
.yellow {
  background-color: yellow;
}

/* 定义绿灯样式 */
.green {
  background-color: green;
}

/* 将灯组成横向排列 */
.lights {
  display: flex;
  justify-content: center;
}

/* 定义闪烁动画 */
.blink {
  animation: blinker 0.6s linear infinite;
}

/* 定义闪烁效果的关键帧 */
@keyframes blinker {
  50% {
    opacity: 0.3;
  }
} 

上面的代码定义了灯的样式，也就是一个圆形，以及三种不同的颜色。接下来是将灯横向排列的样式。最后是定义一个闪烁动画，以便实现黄灯的闪烁效果。

<div class="lights">
  <div class="light red"></div>
  <div class="light yellow blink"></div>
  <div class="light green"></div>
</div> 

最后在HTML文件中使用div将三种不同颜色的灯组成一行，其中黄灯使用了闪烁动画。这样就制作完成了一个简单的红绿灯效果。