Skip to content

Instantly share code, notes, and snippets.

@Shanfan

Shanfan/index.html

Created January 2, 2016 19:53
Show Gist options
  • Save Shanfan/e0e823083890b63d4a17 to your computer and use it in GitHub Desktop.
Save Shanfan/e0e823083890b63d4a17 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Space Invader
Raw
index.html
<html>
<body>
<div class="container">
<div id="space-invader"></div>
<div id="trap"></div>
</div>
<aside>
<h3>Space Invader!</h3>
<ul><li>Click inside the trap to heat up the fire</li>
<li>Move left/right to target the Space Invader</li>
<li>Mouse operation only. No keyboard support.</li>
</ul>
</aside>
</body>
</html>
Raw
space-invader.css
body {
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
}
aside {
position: fixed;
left: 50%;
top: 30px;
margin-left: 170px;
}
#space-invader {
box-shadow: 0 0 0 1em #333,
0 1em 0 1em #333,
-2.5em 1.5em 0 .5em #333,
2.5em 1.5em 0 .5em #333,
-3em -3em 0 0 #333,
3em -3em 0 0 #333,
-2em -2em 0 0 #333,
2em -2em 0 0 #333,
-3em -1em 0 0 #333,
-2em -1em 0 0 #333,
2em -1em 0 0 #333,
3em -1em 0 0 #333,
-4em 0 0 0 #333,
-3em 0 0 0 #333,
3em 0 0 0 #333,
4em 0 0 0 #333,
-5em 1em 0 0 #333,
-4em 1em 0 0 #333,
4em 1em 0 0 #333,
5em 1em 0 0 #333,
-5em 2em 0 0 #333,
5em 2em 0 0 #333,
-5em 3em 0 0 #333,
-3em 3em 0 0 #333,
3em 3em 0 0 #333,
5em 3em 0 0 #333,
-2em 4em 0 0 #333,
-1em 4em 0 0 #333,
1em 4em 0 0 #333,
2em 4em 0 0 #333;
background: #333;
width: 1em;
height: 1em;
overflow: hidden;
position:absolute;
left:0px;
top:0px;
transform: scale(.3, .3);
-ms-transform: scale(.3, .3);/* IE 9 */
-webkit-transform: scale(.3, .3); /* Safari and Chrome */
-o-transform: scale(.3, .3); /* Opera */
-moz-transform: scale(.3, .3); /* Firefox */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment