红绿灯 CSS 动画 —— 精彩绝伦的视觉盛宴

2023-10-04 02:53:03

CSS 动画技术巧妙呈现红绿灯：引人入胜的视觉效果

简介

红绿灯是城市景观中不可或缺的一部分，它们引导行人安全穿越道路，确保交通顺畅。借助 CSS 动画技术的蓬勃发展，我们现在可以轻松地将红绿灯的动态变化搬上网页。本文将深入探究如何运用 CSS 动画技术，创造一个逼真且引人入胜的红绿灯动画效果。

原理揭秘

乍一看，您可能会对纯 CSS 动画能否实现红绿灯效果存疑。但深入了解背后的原理，您就会发现这其实非常简单。

样式剖析

.traffic-light {
  width: 200px;
  height: 300px;
  margin: 0 auto;
  position: relative;
}

.traffic-light__bulb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.traffic-light__bulb--red {
  background-color: #FF0000;
  animation: red-light 10s infinite;
}

.traffic-light__bulb--yellow {
  background-color: #FFFF00;
  animation: yellow-light 10s infinite;
}

.traffic-light__bulb--green {
  background-color: #00FF00;
  animation: green-light 10s infinite;
}

@keyframes red-light {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes yellow-light {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes green-light {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

从样式中可以看出，每个灯的 animation 持续时间均为 10 秒，这意味着动画将持续循环播放。同时，它们之间的时序关系也保持同步。

动画共分为 5 个阶段：

红色灯亮起 ：红色灯的 opacity 从 0 渐变成 1，表示灯亮。
红色灯熄灭，黄色灯亮起 ：红色灯的 opacity 从 1 渐变成 0，熄灭；同时，黄色灯的 opacity 从 0 渐变成 1，亮起。
黄色灯熄灭，绿色灯亮起 ：黄色灯的 opacity 从 1 渐变成 0，熄灭；同时，绿色灯的 opacity 从 0 渐变成 1，亮起。
绿色灯熄灭，红色灯亮起 ：绿色灯的 opacity 从 1 渐变成 0，熄灭；同时，红色灯的 opacity 从 0 渐变成 1，亮起。
循环：动画循环播放，从红色灯亮起开始，依次经过黄色灯亮起、绿色灯亮起、熄灭，再回到红色灯亮起。

步骤指南

在您的项目中应用这个红绿灯 CSS 动画效果，只需以下几个步骤：

创建 HTML 结构 ：创建一个 HTML 文件，添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="traffic-light">
    <div class="traffic-light__bulb traffic-light__bulb--red"></div>
    <div class="traffic-light__bulb traffic-light__bulb--yellow"></div>
    <div class="traffic-light__bulb traffic-light__bulb--green"></div>
  </div>
</body>
</html>