Created
March 5, 2012 22:39
-
-
Save alexmwalker/1981666 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:70%; | |
| 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:80%; | |
| position:relative; | |
| overflow:hidden; | |
| overflow-y:visible; | |
| height:480px; | |
| animation: hz 10s infinite cubic-bezier(.2,0,.8,1); | |
| } | |
| li{ | |
| margin:5px; | |
| list-style:none; | |
| position:relative; | |
| float:left; | |
| color:#67d; | |
| width:60px; | |
| height:30px; | |
| margin-left:10px; | |
| font-weight:700; | |
| animation: flap 1s infinite; | |
| } | |
| li a{ | |
| display:block; | |
| text-decoration:none; | |
| line-height:90%; | |
| text-indent:0; | |
| border:1px #fcc solid; | |
| border-radius:6px; | |
| width:60px; | |
| height:30px; | |
| color:#999; | |
| font-size:10px; | |
| text-align:center | |
| } | |
| li a:first-child:hover { | |
| height:8px; | |
| bottom:0; | |
| left:2px; | |
| background:#900; | |
| position:absolute; | |
| font-size:9px; | |
| font-weight:400; | |
| border:0 none; | |
| border-radius:0 0 4px ; | |
| width:58px; | |
| color:#fff; | |
| } | |
| /*li:after, li:before { | |
| display:none; | |
| 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 dive1 { /* 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><a href="#stripes">Stripes</a> | |
| <a href="http://vasilis.nl">Vasilis van Gemert</a></li> | |
| <li><a href="#notepad">Notepad</a> | |
| <a href="http://twitter.com/eworm_">Wout Mager</a></li> | |
| <li><a href="#bbubles">Bbubles</a> | |
| <a href="http://cssing.org.ua">akella & Genn</a></li> | |
| <li><a href="#swiss">Swiss</a> | |
| <a href="http://chrsl.net">Chris Lee</a></li> | |
| <li><a href="#turnaround">Turn around</a> | |
| <a href="http://www.basvandorst.nl">Bas van Dorst</a></li> | |
| <li><a href="#whirl">Whirl</a> | |
| <a href="https://twitter.com/iamvdo">Vincent De Oliveira</a></li> | |
| <li><a href="#bundler_inspired">BundlerInspired</a> | |
| <a href="https://github.com/PhilG">PhilG</a></li> | |
| <li><a href="#oldie">Oldie</a> | |
| <a href="http://pointlessone.org">Alexander Mankuta</a></li> | |
| <li><a href="#typhon">Typhon</a> | |
| <a href="http://eswat.ca">ESWAT</a></li> | |
| <li><a href="#cube">Cube</a> | |
| <a href="http://be.net/iurevych">Sergii Iurevych</a></li> | |
| <li><a href="#northern-lights">Northern Lights</a> | |
| <a href="http://potapoff.org">Igor «SkAZi» Potapov</a></li> | |
| <li><a href="#skewed">Skewed</a> | |
| <a href="http://twitter.com/sntxrrr">Paul Steffens</a></li> | |
| <li><a href="#moonlight">Moonlight</a> | |
| <a href="http://twitter.com/derSchepp">Christian "Schepp" Schaefer</a></li> | |
| <li><a href="#typewriter">Typewriter</a> | |
| <a href="http://thisbythem.com">Lance Alton Troxel</a></li> | |
| <li><a href="#oldschool">Old School</a> | |
| <a href="http://romanliutikov.com">Roman Liutikov</a></li> | |
| <li><a href="#m6tt">m6tt</a> | |
| <a href="http://m6tt.com">Matt Woodfield</a></li> | |
| <li><a href="#1024-bytes">1024-bytes</a> | |
| <a href="http://github.com/faisalman">Faisalman</a></li> | |
| <li><a href="#molokai">Molokai</a> | |
| <a href="http://designtomarkup.com">Kien Nguyen</a></li> | |
| <li><a href="#android">Android</a> | |
| <a href="http://agat.in">Aleksej Romanovskij</a></li> | |
| <li><a href="#bookshelf">Bookshelf</a> | |
| <a href="https://github.com/SelenIT">SelenIT</a></li> | |
| <li><a href="#geocities">GeoCities</a> | |
| <a href="https://github.com/asavartsov/">Alexey Savartsov</a></li> | |
| <li><a href="#imbatman">I'm Batman</a> | |
| <a href="./">Paul Reid</a></li> | |
| <li><a href="#facetime">Facetime</a> | |
| <a href="http://twitter.com/bnijenhuis">Bernard Nijenhuis</a></li> | |
| <li><a href="#cloudy">Cloudy</a> | |
| <a href="http://twitter.com/putnik">Sergey Leschina</a></li> | |
| <li><a href="#greymatter">Grey Matter</a> | |
| <a href="http://pepelsbey.net">Vadim Makeev</a></li> | |
| <li><a href="#blue_square">Blue square</a> | |
| <a href="http://twitter.com/hsablonniere">Hubert Sablonnière</a></li> | |
| <li><a href="#helvetipink">HelvetiPink</a> | |
| <a href="http://billkeller.name">Bill Keller</a></li> | |
| <li><a href="#tangerine">Tangerine</a> | |
| <a href="http://twitter.com/TheBenCourt">Ben Court</a></li> | |
| <li><a href="#summersun">Summer Sun</a> | |
| <a href="http://twitter.com/tanya_peasgood">Tanya Peasgood</a></li> | |
| <li><a href="#lessismore">Less is More</a> | |
| <a href="http://twitter.com/rob_balfre">Rob Balfre</a></li> | |
| <li><a href="#inset">Inset</a> | |
| <a href="http://www.hachemuda.com">Guillermo Latorre</a></li> | |
| <li><a href="#legible">Legible</a> | |
| <a href="http://lumens.se">Reimund Trost</a></li> | |
| <li><a href="#greenlemon">Green Lemon</a> | |
| <a href="http://twitter.com/d_radunz">Dirk Radunz</a></li> | |
| <li><a href="#wired">Wired</a> | |
| <a href="http://www.digitalwaxworks.com">Brett DeWoody</a></li> | |
| <li><a href="#juizstar">Juiz Star</a> | |
| <a href="http://www.creativejuiz.fr">Geoffrey Crofte</a></li> | |
| <li><a href="#wolfr">Wolfr</a> | |
| <a href="http://twitter.com/wolfr_">Johan Ronsse</a></li> | |
| <li><a href="#fortyeight1k">fortyeight1k</a> | |
| <a href="http://michael.haschke.biz">Michael Haschke</a></li> | |
| <li><a href="#columns">Columns</a> | |
| <a href="http://rmcreative.ru">Alexander Makarov</a></li> | |
| <li><a href="#trainspotting">Trainspotting</a> | |
| <a href="http://www.hboaventura.com">Henrique Boaventura</a></li> | |
| <li><a href="#ribbon">ribbon</a> | |
| <a href="http://oodavid.com">David King</a></li> | |
| <li><a href="#solarized">Solarized</a> | |
| <a href="http://twitter.com/heirenton">heirenton</a></li> | |
| <li><a href="#openwater">Open Water</a> | |
| <a href="https://github.com/gilmoreorless">Gilmore Davidson</a></li> | |
| <li><a href="#html5colors">HTML5 Colors</a> | |
| <a href="http://www.theweblife.com">Michael Garrett Jones</a></li> | |
| <li><a href="#heart_css">heart css</a> | |
| <a href="https://github.com/kjchoy">Choy Kum Jin</a></li> | |
| <li><a href="#sourcy">Sourcy</a> | |
| <a href="http://kizu.ru/en/">Roman Komarov</a></li> | |
| <li><a href="#terminal">Terminal</a> | |
| <a href="http://twitter.com/PanyaKor">Mikhail Korepanov</a></li> | |
| <li><a href="#goodnight_moon">Goodnight Moon</a> | |
| <a href="http://livingcode.org">Dethe Elza</a></li> | |
| <li><a href="#fancy">Fancy"</a> | |
| <a href="http://www.trustweb.it">Michele Cipriani</a></li> | |
| <li><a href="#textlevels">Text Levels</a> | |
| <a href="http://www.patrickmann.com">Patrick Mann</a></li> | |
| <li><a href="#yelo">Yelo</a> | |
| <a href="http://bartdebruin.nl">Bart de Bruin</a></li> | |
| <li><a href="#spartan">Spartan</a> | |
| <a href="http://trentm.com">Trent Mick</a></li> | |
| <li><a href="#paper">paper</a> | |
| <a href="http://daniel-rauber.de">Daniel Rauber</a></li> | |
| <li><a href="#lucuma">Lúcuma</a> | |
| <a href="http://twitter.com/germanmartinez">Germán Martínez</a></li> | |
| <li><a href="#freshsoda">Fresh Soda</a> | |
| <a href="http://jungundwillich.de">Jan Ortgies</a></li> | |
| <li><a href="#ev">Ev</a> | |
| <a href="http://evangeneer.net">Mathieu Rochette</a></li> | |
| <li><a href="#b4ya11y">B4y & A11y</a> | |
| <a href="http://twitter.com/etBen">Benoit Klein</a></li> | |
| <li><a href="#adaptype">Adaptype</a> | |
| <a href="http://vasilis.nl">Vasilis van Gemert</a></li> | |
| <li><a href="#bleubleu">BleuBleu</a> | |
| <a href="http://www.leightonrodney.com">Leighton Rodney</a></li> | |
| <li><a href="#simpl">Simpl</a> | |
| <a href="http://www.neofyt.com">Neofyt</a></li> | |
| <li><a href="#mitchiru">Mitchiru</a> | |
| <a href="http://banquo.de">Michael Fritz</a></li> | |
| <li><a href="#casoy">Casoy</a> | |
| <a href="http://twitter.com/robertboloc">Robert Boloc</a></li> | |
| <li><a href="#thesimpleswede">The Simple Swede</a> | |
| <a href="http://www.tobiasphoto.com">Tobias Akeblom</a></li> | |
| <li><a href="#photobox">PhotoBox</a> | |
| <a href="http://stinkyinkshop.co.uk">Stinkyink</a></li> | |
| <li><a href="#desktop">Desktop</a> | |
| <a href="http://webmolot.com">Webmolot</a></li> | |
| <li><a href="#expandable">Expandable</a> | |
| <a href="http://twitter.com/curlybrace">Dennis Madvedovsky</a></li> | |
| <li><a href="#bluebrush">BlueBrush</a> | |
| <a href="https://twitter.com/jennyhao">Jenny Hao</a></li> | |
| <li><a href="#noticeboard">Notice Board</a> | |
| <a href="http://www.about.me/niharsawant">Nihar Sawant</a></li> | |
| <li><a href="#aapl">AAPL</a> | |
| <a href="http://twitter.com/joffreyjaffeux">Joffrey Jaffeux</a></li> | |
| <li><a href="#yollaw">Yollaw</a> | |
| <a href="http://franzose.in">Yan Ivanov</a></li> | |
| <li><a href="#stretchy">Stretchy</a> | |
| <a href="http://twitter.com/mistadikay">Denis Koltsov</a></li> | |
| <li><a href="#smile">smile</a> | |
| <a href="http://twitter.com/realmuecke">Michael Scharnagl</a></li> | |
| <li><a href="#toolbar">Toolbar</a> | |
| <a href="http://chervonny.ru/en/">Maxim Chervonny</a></li> | |
| <li><a href="#roundrect">Round Rect</a> | |
| <a href="http://www.bitstorm.org">Edwin Martin</a></li> | |
| <li><a href="#therhythm">The Rhythm</a> | |
| <a href="http://kizu.ru/en/">Roman Komarov</a></li> | |
| <li><a href="#simplebox">SimpleBox</a> | |
| <a href="http://raelmax.com">Rael Max</a></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