Created
October 7, 2012 12:18
-
-
Save samarkandiy/3848210 to your computer and use it in GitHub Desktop.
just for fun
This file contains 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="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> |
This file contains 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
/* Created by Azik Samarkandiy */ |
This file contains 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
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} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Use prefix-free.js by Lea Verou to make it work on all browsers!