昨天早早的就睡了，没有写。这篇是css实现红绿灯，也写在js知识点里吧，每天知识的积累，不一定是js，哈哈哈哈。
HTML部分
<div class="trafic-light">
<div class="i red"></div>
<div class="i orange"></div>
<div class="i green"></div>
</div>
CSS部分
.trafic-light {padding:10px;background-color:#333;border:2px solid #000;width:30px;border-radius:10px;}
.i {margin:5px 0;height:26px;border:2px solid #000;border-radius:50%;animation-duration:10s;animation-timing:linear;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.red {background-color:#300;animation-name:redlight;}
.orange {background-color:#430;animation-name:orangelight;}
.green {background-color:#030;animation-name:greenlight;}
@keyframes redlight {
0% {
background-color:#f00;
}
39% {
background-color:#f00;
}
40% {
background-color:#300;
}
}
@keyframes orangelight {
0% {
background-color:#430;
}
39% {
background-color:#430;
}
40% {
background-color:#fc0;
}
59% {
background-color:#fc0;
}
60% {
background-color:#430;
}
}
@keyframes greenlight {
0% {
background-color:#030;
}
59% {
background-color:#030;
}
60% {
background-color:#0a0;
}
99% {
background-color:#0a0;
}
100% {
background-color:#030;
}
}
这里主要是对CSS3中animation的一个应用。效果图如下：
trafigLight.gif
