Created
March 5, 2012 04:14
-
-
Save alexmwalker/1976592 to your computer and use it in GitHub Desktop.
Galaga!! pew pew pew!
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
| /** | |
| * Galaga!! pew pew pew! | |
| */ | |
| body{ | |
| padding-top:30px; | |
| font-family:sans-serif; | |
| font-size:28px; | |
| background: #000; | |
| color:#fff; | |
| background-image: | |
| radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), | |
| radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), | |
| radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), | |
| radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); | |
| background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; | |
| background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; | |
| } | |
| div { | |
| width:60%; | |
| position:relative; | |
| top:-150px; | |
| animation: hz 13s infinite cubic-bezier(.2,0,.8,1); | |
| } | |
| div span{ | |
| height:60%; | |
| width:45px; | |
| font-size:60px; | |
| display:block; | |
| position:absolute; | |
| transform: rotate(90deg); | |
| animation: hz 3s infinite cubic-bezier(.2,0,.8,1); | |
| } | |
| div span:before{ | |
| height:60%; | |
| width:45px; | |
| content:"H"; | |
| top:36px;left:-15px; | |
| font-size:60px; | |
| display:block; | |
| position:absolute; | |
| transform: rotate(-90deg); | |
| } | |
| ul{ | |
| width:60%; | |
| position:relative; | |
| overflow:hidden; | |
| overflow-y:visible; | |
| height:480px; | |
| animation: hz 15s infinite cubic-bezier(.2,0,.8,1); | |
| } | |
| li{ | |
| margin:20px; | |
| list-style:none; | |
| position:relative; | |
| float:left; | |
| color:#67d; | |
| font-size:55px; | |
| width:40px; | |
| height:40px; | |
| margin-left:30px; | |
| font-weight:700; | |
| animation: flap 1s infinite; | |
| } | |
| li a { | |
| display:none; | |
| } | |
| li a:first-child { | |
| display:block; | |
| text-indent:-999em; | |
| outline:1px cyan dotted; | |
| width:40px; | |
| } | |
| li a:first-child:hover { | |
| display:block; | |
| text-indent:0; | |
| outline:1px cyan dotted; | |
| width:40px; | |
| z-index:900; | |
| color:#fff; | |
| font-size:20px; | |
| } | |
| li:after,li:before { | |
| font-size:55px; | |
| content:"ത"; | |
| text-indent:-18px; | |
| top:8px; | |
| outline:1px red dashed; | |
| background-size:150% -50%; | |
| display:block; | |
| margin:-10px; | |
| position:absolute; | |
| font-weight:700; | |
| width:12px; | |
| height:23px; | |
| border-radius:50%; | |
| background:green; | |
| } | |
| li:after { | |
| width:auto; | |
| position:relative; | |
| color:yellow; | |
| font-weight:400; | |
| text-indent:0px; | |
| height:20px; | |
| content:"♚";/*ൠ*/ | |
| font-size:24px; | |
| top:0px; left:-5px; | |
| background:red; | |
| } | |
| li:nth-child(6) { | |
| animation: dive 11s 3s infinite cubic-bezier(.29,0,.64,1),flap 1s infinite; | |
| } | |
| li:nth-child(5) { | |
| animation: dive 10s 13s infinite cubic-bezier(.29,0,.64,1),flap 1s infinite; | |
| } | |
| li:nth-child(2) { | |
| animation: dive 12s 7s infinite cubic-bezier(.29,0,.64,1),flap 1s infinite; | |
| } | |
| li:nth-child(3) { | |
| animation: dive 9s 9s infinite cubic-bezier(.29,0,.64,1),flap 1s infinite; | |
| } | |
| @keyframes hz { /* horizontal movement */ | |
| 0%,100% {left:0;} | |
| 50% {left:180px;} | |
| } | |
| @keyframes flap { | |
| 0%,100% {font-size:55px;} | |
| 50% {font-size:52px;} | |
| } | |
| @keyframe pew { | |
| 0%,100% {background: linear-gradient(top, rgba(255,255,255,0) 1%,rgba(255,255,255,1) 4%,rgba(255,255,255,1) 9%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 13%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */} | |
| 100% {background: linear-gradient(top, rgba(255,255,255,0) 1%,rgba(255,255,255,1) 4%,rgba(255,255,255,1) 9%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 13%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */} | |
| } | |
| @keyframes dive { /* vertical movement */ | |
| 0% {left:0;transform:rotate(0deg)} | |
| 4.0% {top:-20px;} | |
| 6% {left:-60px;} | |
| 8.0% {transform:rotate(-360deg)} | |
| 12.0% {transform:rotate(-330deg)} | |
| 20.0% {left:120px;} | |
| 32.0% {left:50px;top:480px;transform:rotate(-400deg)} | |
| 32.1% {top:-90px} | |
| 40.0% {left:0;top:0;transform:rotate(-360deg) } | |
| 100% {left:0;top:0;transform:rotate(-360deg) } | |
| } |
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
| <!-- content to be placed inside <body>…</body> --> | |
| <ul> | |
| <li><a href="./">Default</a> | |
| <a href="http://twitter.com/jacobrask">Jacob Rask</a></li> | |
| <li> ത </li> | |
| <li> ത </li> | |
| <li> ത </li> | |
| <li> ത </li> | |
| <li> ത </li> | |
| <li> ത </li> | |
| <li> ത </li> | |
| <li> ത </li> | |
| <li> ത </li> | |
| </ul> | |
| <div><span> ⫷ </span></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
| {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment