Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created March 3, 2012 22:04
Show Gist options
  • Save alexmwalker/1968572 to your computer and use it in GitHub Desktop.
Save alexmwalker/1968572 to your computer and use it in GitHub Desktop.
Download ZIP
Galaga!! pew pew pew!
Raw
dabblet.css
/**
* Galaga!! pew pew pew!
*/
body{
padding-top:30px;
font-family:sans-serif;
font-size:28px;
background: #000;
overflow:hidden;
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:200%;
position:absolute;
top:0px;
background:red;
animation: hz 13s infinite cubic-bezier(.2,0,.8,1);
}
div span{
width:5px;
font-size:50px;
text-indent:-170px
font-weight:700;
display:block;
position:absolute;
height:20px;
color:#f00;
height:500px;
animation: hz 7s infinite cubic-bezier(.2,0,.8,1);
}
div span:before, div span:after{
height:50px;
width:50px;
bottom:-8px;
content:"⎵";
color:#fff;
left:-31px;
font-size:70px;
display:block;
position:absolute;
/*transform: rotate(-90deg); */
}
div span:after{
content:"⅄";/*☤⩓➤ ⅄*/
transform: rotate(0deg);
text-indent:-21px;
bottom:-2px;
left:1px;
font-size:65px;
font-weight:400;
height:20px;
width:44px
}
ul{
width:70%;
position:relative;
overflow:hidden;
height:500px;
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:10px;
height:40px;
margin-left:30px;
font-weight:700;
animation: flap 1s infinite;
}
li:after,li:before {
font-size:55px;
content:" ";
top:23px;
left:19px;
position:absolute;
font-weight:400;
width:12px;
height:23px;
border-radius:50%;
background:red;
}
li:after {
width:45px;
color:yellow;
font-weight:400;
height:30px;
content:"♚";/*ൠ*/
font-size:24px;
top:3px; left:11px;
background:none;
}
li:nth-child(8n-3) {
animation: dive 11s 3s infinite cubic-bezier(.3,0,.64,1),flap 1s infinite;
}
li:nth-child(7n) {
animation: dive 10s 13s infinite cubic-bezier(.3,0,.64,1),flap 1s infinite;
}
li:nth-child(5+2) {
animation: dive 12s 7s infinite cubic-bezier(.3,0,.64,1),flap 1s infinite;
}
li:nth-child(3) {
animation: dive 9s 9s infinite cubic-bezier(.3,0,.64,1),flap 1s infinite;
}
@keyframes hz { /* horizontal movement */
0%,100% {left:0;}
50% {left:30%;}
}
@keyframes flap {
0%,100% {font-size55px;}
50% {font-size:52px;}
}
@keyframe pew {
0% {background: linear-gradient(
0%,rgba(252,252,252,0)
88%,rgba(252,252,252,1)
91%,rgba(252,252,252,1)
94%,rgba(252,252,252,0)
97%,rgba(252,252,252,0) 99%); /* W3C */
}
100% {background: linear-gradient(
0%,rgba(252,252,252,0)
1%,rgba(252,252,252,1)
2%,rgba(252,252,252,1)
5%,rgba(252,252,252,0)
100%,rgba(252,252,252,0); /* W3C */
}
}
@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:500px;transform:rotate(-400deg)}
32.1% {top:-90px}
40.0% {left:0;top:0;transform:rotate(-360deg) }
100% {left:0;top:0;transform:rotate(-360deg) }
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
<li> ത </li>
</ul>
<div><span> </span></div>
Raw
settings.json
{"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