Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created February 17, 2012 09:28
Show Gist options
  • Save alexmwalker/1852133 to your computer and use it in GitHub Desktop.
Save alexmwalker/1852133 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Pong *
Raw
dabblet.css
/**
* CSS3 Pong *
*/
body{
background: #000;
}
#court {
margin-top:30px;
border:5px dashed #fff;
height:500px;
position:relative;
}
#horizontal {
width: auto;
height:40px;
padding-right:40px;
animation: vertical 1.7s infinite linear;
position:relative;
}
#vertical {
background:#0ff;
width: 40px;
height:40px;
border-radius:40px;
animation: horizontal 1.9s infinite linear;
}
#bat1, #bat2 {
background:#f00;
width: 10px;
height:60px;
margin-top:-10px;
position:absolute;
right:0px;
top:0px;
color:red
}
#bat2 {
left:0
}
@keyframes vertical { /* flame pulses */
0% {
top:0%;
margin-top:0px
}
50% {
top:100%;
margin-top:-40px
}
100% {
top:0%;
margin-top:0px
}
}
@keyframes horizontal { /* flame pulses */
0% {
margin-left:0%;
}
50% {
margin-left:100%;
right:-40px
}
100% {
margin-left:0%;
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="court">
<div id="horizontal">
<div id="vertical">
</div>
<div id="bat1"></div>
<div id="bat2"></div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment