Created
May 14, 2014 20:11
-
-
Save gfarrell/82a03da578dd1adee389 to your computer and use it in GitHub Desktop.
Octagon
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
/** | |
* Octagon | |
*/ | |
.octagon { | |
width: 100px; | |
height: 100px; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
} | |
.octagon div { | |
position: absolute; | |
border-top: #CCC 5px solid; | |
border-bottom: #CCC 5px solid; | |
width: 45px; | |
height: 100px; | |
} | |
.octagon div:nth-child(1) { | |
transform: rotate(0deg); | |
animation: pulse-top 4s ease infinite 0s, | |
pulse-bottom 4s ease infinite 4s; | |
} | |
.octagon div:nth-child(2) { | |
transform: rotate(45deg); | |
animation: pulse-top 4s ease infinite 1s, | |
pulse-bottom 4s ease infinite 5s; | |
} | |
.octagon div:nth-child(3) { | |
transform: rotate(90deg); | |
animation: pulse-top 4s ease infinite 2s, | |
pulse-bottom 4s ease infinite 6s; | |
} | |
.octagon div:nth-child(4) { | |
transform: rotate(135deg); | |
animation: pulse-top 4s ease infinite 3s, | |
pulse-bottom 4s ease infinite 7s; | |
} | |
@keyframes pulse-top { | |
0% { | |
border-top-color: #CCC; | |
} | |
25% { | |
border-top-color: #7fa39f; | |
} | |
50% { | |
border-top-color: #CCC; | |
} | |
} | |
@keyframes pulse-bottom { | |
0% { | |
border-bottom-color: #CCC; | |
} | |
25% { | |
border-bottom-color: #7fa39f; | |
} | |
50% { | |
border-bottom-color: #CCC; | |
} | |
} |
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="octagon"> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></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
// alert('Hello world!'); |
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
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment