A CodePen by COMPILR.ORG. Traffic light using CSS - just for fun

index.html

<div class="trafficlight">
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="protector"></div>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

script.js

/* Created by Azik Samarkandiy */

style.css

html{
  background: linear-gradient(#08f, #fff);
  padding: 40px;
  width: 170px;
  height: 100%;
  margin: 0 auto;
}

.trafficlight{
  background: #222;
  background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
  width: 170px;
  height: 400px;
  border-radius: 20px;
  position: relative;
  border: solid 5px #333;
}

.trafficlight:before{
  background: #222;
  background-image: radial-gradient(#444, #000);
  content: "";
  width: 170px;
  height: 150px;
  margin: 0 auto;
  position: absolute;
  top: -20px;
  margin-left: 0px;
  border-radius: 50%;
  z-index: -1;
}

.trafficlight:after{
  background: #222;
  background-image: linear-gradient(-0deg, #777 10%, #ccc 30%, #000);
  content: "";
  width: 50px;
  height: 500px;
  margin-left: 60px;
  position: absolute;
  top: 150px;
  z-index: -1;
}

.protector{
  background: transparent;
  width: 180px;
  height: 0;
  position: absolute;
  top: 20px;
  left: -35px;
  border-right: solid 30px transparent;
  border-left: solid 30px transparent;
  border-top: solid 90px #111;
  border-radius: 10px;
  z-index: -1;
}

.protector:nth-child(2){
  top: 140px;
}

.protector:nth-child(3){
  top: 260px;
}

.red{
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 5px 5px; 
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 35px;
  animation: 13s red infinite;
  border: dotted 2px red;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px red;
}

.yellow{
  background: yellow;
  background-image: radial-gradient(orange, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: dotted 2px yellow;
  position: absolute;
  top: 145px;
  left: 35px;
  animation: 13s yellow infinite;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px yellow;
}

.green{
  background: green;
  background-image: radial-gradient(lime, transparent);
  background-size: 5px 5px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: dotted 2px lime;
  position: absolute;
  top: 270px;
  left: 35px;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px lime;
  animation: 13s green infinite;
}

@keyframes red{
  0%{opacity: 1}
  20%{opacity: 1}
  40%{opacity: 1}
  60%{opacity: .1}
  80%{opacity: .1}
  100%{opacity: .1}
}

@keyframes yellow{
  0%{opacity: .1}
  20%{opacity: .1}
  40%{opacity: 1}
  50%{opacity: .1}
  60%{opacity: .1}
  80%{opacity: .1}
  100%{opacity: .1}
}

@keyframes green{
  0%{opacity: .1}
  20%{opacity: .1}
  40%{opacity: .1}
  60%{opacity: 1}
  80%{opacity: 1}
  83%{opacity: .1}
  86%{opacity: 1}
  89%{opacity: .1}
  93%{opacity: 1}
  96%{opacity: .1}
  100%{opacity: 1}
}