CSS页面代码:
<style>
*{
margin: 0;
padding: 0;
}
.signal-light{
width: 400px;
margin: 100px auto 0;
}
.light{
display: flex;
margin: 0 auto;
width: 140px;
height: 500px;
flex-direction: column;
align-items: center;
border-radius: 70px;
background-color: #333;
}
.light div{
width: 100px;
height: 100px;
margin-top: 20px;
border-radius: 100px;
background-color: #eee;
}
.light div.countdown{
text-align: center;
font-size: 48px;
line-height: 100px;
}
#red.active{
background-color: red;
}
#yellow.active{
background-color: yellow;
}
#green.active{
background-color:green;
}
HTML页面代码:
<div class="signal-light">
<div class="light">
<div