Created
September 2, 2012 22:08
-
-
Save loonfly/3605063 to your computer and use it in GitHub Desktop.
Tetris loader in CSS (tetrisfriends.com)
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
| .tetris | |
| .block1 | |
| .block2 | |
| .block3 | |
| .block4 |
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
| // Tetris loader in CSS (tetrisfriends.com) |
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
| @-webkit-keyframes colors { | |
| 0% {background: #af298a;} | |
| 7% {background: #af298a;} | |
| 14% {background: #e35b02;} | |
| 21% {background: #e35b02;} | |
| 28% {background: #59b101;} | |
| 35% {background: #59b101;} | |
| 42% {background: #e39f02;} | |
| 49% {background: #e39f02;} | |
| 56% {background: #d70f37;} | |
| 63% {background: #d70f37;} | |
| 70% {background: #2141c6;} | |
| 77% {background: #2141c6;} | |
| 84% {background: #0f9bd7;} | |
| 91% {background: #0f9bd7;} | |
| 100% {background: #af298a;} | |
| } | |
| @-webkit-keyframes block1 { | |
| 0% {left: 8px; top: 0;} | |
| 24% {left: 8px; top: 0;} | |
| 28% {left: 24px; top: 0;} | |
| 35% {left: 24px; top: 0;} | |
| 42% {left: 16px; top: 0;} | |
| 49% {left: 16px; top: 0;} | |
| 56% {left: 8px; top: 0;} | |
| 77% {left: 8px; top: 0;} | |
| 81% {left: 0; top: 0;} | |
| 84% {left: 0; top: 8px;} | |
| 91% {left: 0; top: 8px;} | |
| 95% {left: 0; top: 0;} | |
| 100% {left: 8px; top: 0;} | |
| } | |
| @-webkit-keyframes block2 { | |
| 0% {left: 24px; top: 0;} | |
| 21% {left: 24px; top: 0;} | |
| 25% {left: 24px; top: 16px;} | |
| 35% {left: 24px; top: 16px;} | |
| 42% {left: 32px; top: 16px;} | |
| 49% {left: 32px; top: 16px;} | |
| 56% {left: 40px; top: 16px;} | |
| 77% {left: 40px; top: 16px;} | |
| 81% {left: 48px; top: 16px;} | |
| 84% {left: 48px; top: 8px;} | |
| 91% {left: 48px; top: 8px;} | |
| 95% {left: 48px; top: 0;} | |
| 100% {left: 40px; top: 0;} | |
| } | |
| @-webkit-keyframes block3 { | |
| 0% {left: 40px; top: 0;} | |
| 35% {left: 40px; top: 0;} | |
| 42% {left: 32px; top: 0;} | |
| 49% {left: 32px; top: 0;} | |
| 56% {left: 24px; top: 0;} | |
| 66% {left: 24px; top: 0;} | |
| 70% {left: 24px; top: 16px;} | |
| 77% {left: 24px; top: 16px;} | |
| 81% {left: 32px; top: 16px;} | |
| 84% {left: 32px; top: 8px;} | |
| 91% {left: 32px; top: 8px;} | |
| 95% {left: 32px; top: 16px;} | |
| 100% {left: 24px; top: 16px;} | |
| } | |
| @-webkit-keyframes block4 { | |
| 0% {left: 24px; top: 16px;} | |
| 7% {left: 24px; top: 16px;} | |
| 14% {left: 8px; top: 16px;} | |
| 35% {left: 8px; top: 16px;} | |
| 42% {left: 16px; top: 16px;} | |
| 49% {left: 16px; top: 16px;} | |
| 56% {left: 24px; top: 16px;} | |
| 63% {left: 24px; top: 16px;} | |
| 67% {left: 8px; top: 16px;} | |
| 77% {left: 8px; top: 16px;} | |
| 81% {left: 16px; top: 16px;} | |
| 84% {left: 16px; top: 8px;} | |
| 91% {left: 16px; top: 8px;} | |
| 95% {left: 16px; top: 0;} | |
| 100% {left: 24px; top: 0;} | |
| } | |
| .tetris { | |
| position: relative; | |
| display:block; | |
| width: 64px; | |
| height: 32px; | |
| margin: 32px auto; | |
| } | |
| .block1, .block2, .block3, .block4 { | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| background: #af298a; | |
| box-shadow:inset 0 0 0 4px rgba(0, 0, 0, .1); | |
| } | |
| .block1:before, .block2:before, .block3:before, .block4:before { | |
| content: ""; | |
| display:block; | |
| position: absolute; | |
| top: 1px; | |
| left: 1px; | |
| width: 2px; | |
| height: 3px; | |
| background: rgba(255, 255, 255, .5); | |
| } | |
| .block1 { | |
| left: 8px; top: 0; | |
| -webkit-animation: block1 5s infinite linear, colors 5s infinite linear; | |
| } | |
| .block2 { | |
| left: 24px; top: 0; | |
| -webkit-animation: block2 5s infinite linear, colors 5s infinite linear; | |
| } | |
| .block3 { | |
| left: 40px; top: 0; | |
| -webkit-animation: block3 5s infinite linear, colors 5s infinite linear; | |
| } | |
| .block4 { | |
| left: 24px; top: 16px; | |
| -webkit-animation: block4 5s infinite linear, colors 5s infinite linear; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment