CSS是前端開發(fā)中常用的一種樣式語言，可以用來實現(xiàn)頁面元素的樣式效果。在這篇文章中，我們將使用純CSS來實現(xiàn)紅綠燈。

/*定義紅綠燈容器*/
.light-box{
width:120px;
height:240px;
border:1px solid #333;
background-color:#222;
margin:50px auto;
position:relative;
}
/*定義三種信號燈*/
.light{
width:100px;
height:100px;
margin:10px auto;
border-radius:50%;
position:absolute;
}
/*定義紅燈樣式*/
.red{
top:10px;
background-color:#f00;
}
/*定義黃燈樣式*/
.yellow{
top:110px;
background-color:#ff0;
}
/*定義綠燈樣式*/
.green{
top:210px;
background-color:#0f0;
}
/*定義動畫效果*/
.red.active, .yellow.active, .green.active {
box-shadow: 0 0 20px 10px #fff;
}
/*定義周期*/
@keyframes blink {
from { opacity: 0; }
to   { opacity: 1; }
}
.yellow {
animation: blink 0.7s step-end infinite;
}

在以上的代碼中，我們首先定義了紅綠燈的容器樣式，包括寬度、高度、邊框、背景顏色和位置等。然后分別定義了三種信號燈的樣式，包括大小、邊框半徑、位置和背景顏色等，其中紅燈的位置是從上往下第一顆，黃燈是從上往下第二顆，綠燈是從上往下第三顆。最后，我們通過使用CSS3中的動畫效果，實現(xiàn)了黃燈閃爍的效果。

要實現(xiàn)紅綠燈的切換效果，我們需要使用JavaScript來控制三種信號燈的狀態(tài)。例如：

//獲取紅綠燈容器和信號燈元素
var lightBox = document.querySelector('.light-box');
var redLight = document.querySelector('.red');
var yellowLight = document.querySelector('.yellow');
var greenLight = document.querySelector('.green');
//設(shè)置定時器，控制信號燈狀態(tài)的切換
setInterval(function(){
//切換紅燈狀態(tài)
redLight.classList.toggle('active');
//如果黃燈的狀態(tài)是激活的，則將其取消
if (yellowLight.classList.contains('active')) {
yellowLight.classList.remove('active');
} else {
//否則激活黃燈狀態(tài)
yellowLight.classList.add('active');
}
//切換綠燈狀態(tài)
greenLight.classList.toggle('active');
}, 2000);

通過以上的JavaScript代碼，我們可以讓紅綠燈隔2秒鐘自動切換狀態(tài)，即紅燈亮起，黃燈閃爍，綠燈滅；然后是黃燈亮起，紅燈熄滅，綠燈滅；最后是綠燈亮起，紅燈熄滅，黃燈滅。通過這種方式，我們實現(xiàn)了一個純CSS的紅綠燈效果。