CSS红绿灯，JS知识点（二）

昨天早早的就睡了，没有写。这篇是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