This is traffic lights style CSS.
A Pen by Leonardo Lima on CodePen.
Last active
August 29, 2015 14:06
-
-
Save leonardo403/f672ae19bb6ade91a503 to your computer and use it in GitHub Desktop.
traffic lights CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*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;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment