在网页设计中，使用CSS3可以轻松制作出各种动画效果。而红绿灯动画也是非常受欢迎的一种效果。那么，CSS3怎样制作红绿灯呢？ 首先，在HTML中创建一个div容器，设置它的class为“traffic_light”，然后在里面创建三个圆形灯泡，分别对应红、黄、绿三个状态。如下所示：

接着，在CSS中为容器和灯泡设置基本样式。这里我们使用CSS3中的圆角样式border-radius，让容器和灯泡都呈现圆形。

.traffic_light {
width: 120px;
height: 300px;
border: 2px solid black;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.traffic_light p {
width: 100px;
height: 100px;
margin: 20px auto;
border-radius: 50%;
background-color: gray;
}

为了实现红绿灯不同状态的切换效果，我们需要使用CSS3中的关键帧动画@keyframes。我们将红灯和绿灯的状态制作成两个不同的动画，分别控制不同的灯泡。 以下为红灯闪烁动画的代码：

@keyframes red_light {
from { background-color: red; }
to { background-color: transparent; }
}
.red_light {
animation: red_light 1s infinite;
}

以下为绿灯常亮动画的代码：

@keyframes green_light {
from { background-color: green; }
to { background-color: green; }
}
.green_light {
animation: green_light 3s infinite;
}

最后，我们再添加一个JavaScript函数，控制红绿灯的切换：

var red = document.querySelector('.red_light');
var yellow = document.querySelector('.yellow_light');
var green = document.querySelector('.green_light');
function switchLight() {
setTimeout(function() {
red.style.animation = 'none';
yellow.style.animation = 'none';
green.style.animation = 'none';
setTimeout(function() {
red.style.animation = 'red_light 1s infinite';
yellow.style.animation = 'yellow_light 1s infinite';
green.style.animation = 'green_light 3s infinite';
}, 1000);
}, 1000);
}
switchLight();
setInterval(switchLight, 4000);

以上代码实现了一个自动循环切换红绿灯状态的动画效果。我们使用JavaScript中的setTimeout和setInterval函数控制切换时间，从而呈现出持续闪烁的红灯和长时间常亮的绿灯。 总结来说，使用CSS3制作红绿灯动画效果主要是通过圆形灯泡和关键帧动画来实现的。通过JavaScript函数来控制灯泡状态和切换时间，达到理想的效果。