css两个红灯交替闪烁

在网页设计中，利用CSS可以实现许多炫酷的效果。今天，我们就来看一下如何使用CSS制作两个红灯交替闪烁的效果。

.red-light{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  Box-shadow: 0 0 10px red;
  margin: 10px;
  display: inline-block;
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink{
  50%{
    opacity: 0.5;
  }
}

以上是CSS代码的实现部分。首先，我们定义一个红灯的形状，使用CSS的border-radius属性设置了边角为50%的圆形。设置红色背景，并加上阴影效果，让红灯看起来更加真实。此外，利用display属性将两个红灯展示为行内元素。接着，使用CSS的animation属性定义了一个名为blink的关键帧动画，让两个红灯交替闪烁。

通过CSS实现两个红灯交替闪烁，简单易懂，但也需要一定的CSS基础。希望今天的文章能对你有所帮助。