在網頁設計中，使用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函數來控制燈泡狀態和切換時間，達到理想的效果。