效果演示
html 代码
<link rel="stylesheet" href="index.css">
<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>
css 代码
html{background: linear-gradient(#08f, #fff);padding: 40px;width: 170px;height: 100%;margin: 0 auto;}
.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;}
.trafficlight{background: #222;background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);width: 170px;height: 400px;border-radius: 10px;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: -30px;margin-left: 0px;border-radius: 50%;z-index: -1;}
.trafficlight:after{background: #222;background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);content: "";width: 75px;height: 800px;margin-left: 50px;position: absolute;top: 150px;z-index: -1;}
.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;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%;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%;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;}85%{opacity: .1;}90%{opacity: 1;}95%{opacity: .1;}100%{opacity: 1;}}
