traffic lights CSS

index.html

<div class="wrap">
  <div class="apoio"></div>
  <div class="red"></div>
  <div class="yell"></div>
  <div class="green"></div>
      <div class="faixa-a"></div>
    <div class="faixa-b"></div>
    <div class="faixa"></div>
  <div class="asfalto"></div>  
</div> 

style.less

/*config red*/
@top-red:20px;
@right:45px;
/*config yellow*/
@top-yell:70px;
@right:45px;
/*config green*/
@top-green:120px;
@right:45px;
/*var color*/
@black:black;
@red:red;
@yellow:yellow;
@green:green;
@gray:gray;
@white:white;
/*var border-radius*/
@bd-wp:10px;
@bd-sin:50px;

@top-ground: 281px;

html, body{margin:0px;padding:0px;}
.wrap{ width:100px;height:170px;background:@black;
float:left;
margin:2.3em 35em;position:relative; 
border-radius:@bd-wp;z-index:1;
} 
.faixa-a{background:@white;width:260px;height:25px;margin:333px 0 0 -454px;position:absolute;z-index:29;}
.faixa-b{background:@white;width:260px;height:25px;margin:333px 0 0 80px;position:absolute;z-index:29;}
.asfalto{background:@black;width:241px;height:225px;position:absolute;margin:214px;transform: matrix(-1.134, 0.5, -8.5, -0.134, -791, 10);z-index:10;}
.apoio{background:@black;width:35px;height:280px;position:absolute;}
.red{margin:@top-red @right;
 border-radius:@bd-sin;
z-index:3;width:35px;height:35px;
 position:absolute;background:@red;
-webkit-animation: anim-red 5s linear 10s infinite alternate;
-moz-animation: anim-red 5s linear 10s infinite alternate;  
animation: anim-red 5s linear 10s infinite alternate;
}
.yell{
  margin:@top-yell @right;
 border-radius:@bd-sin;background:@yellow;
z-index:3;width:35px;height:35px;
 position:absolute;
 -webkit-animation: anim-yell 5s linear 14s infinite alternate;
-moz-animation: anim-yell 5s linear 14s infinite alternate;  
animation: anim-yell 5s linear 14s infinite alternate; 
}
.green{
  margin:@top-green @right;
 border-radius:@bd-sin;background:@green;
z-index:3;width:35px;height:35px;
 position:absolute;
 -webkit-animation: anim-green 5s linear 17s infinite alternate;
-moz-animation: anim-green 5s linear 17s infinite alternate;  
animation: anim-green 5s linear 17s infinite alternate;  
}
/*Animation Red*/
@-webkit-keyframes anim-red { 
  0% {background:@red;}
  25% {background:@red;}
  50% {background:@black;}
  75% {background:@black;}
  100% {background:@black;}
}
@keyframes anim-red { 
  0% {background:@red;}
  25% {background:@red;}
  50% {background:@black;}
  75% {background:@black;}
  100% {background:@black;}
}
/*Animation Yellow*/
@-webkit-keyframes anim-yell { 
  0% {background:@yellow;}
  25% {background:@yellow;}
  50% {background:@black;}
  75% {background:@black;}
  100% {background:@black;}
}
@keyframes anim-yell { 
  0% {background:@yellow;}
  25% {background:@yellow;}
  50% {background:@black;}
  75% {background:@black;}
  100% {background:@black;}
}
/*Animation Green*/
@-webkit-keyframes anim-green { 
  0% {background:@green;}
  25% {background:@green;}
  50% {background:@black;}
  75% {background:@black;}
  100% {background:@black;}
}
@keyframes anim-green { 
  0% {background:@green;}
  25% {background:@green;}
  50% {background:@black;}
  75% {background:@black;}
  100% {background:@black;}
}

traffic-lights-CSS.markdown

traffic lights CSS

This is traffic lights style CSS.

A Pen by Leonardo Lima on CodePen.

License.