Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created February 17, 2012 09:33
Show Gist options
  • Save alexmwalker/1852157 to your computer and use it in GitHub Desktop.
Save alexmwalker/1852157 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Pong *
Raw
dabblet.css
/**
* CSS3 Pong *
*/
body{
background: #000;
}
#court {
margin-top:40px;
border:5px dashed #fff;
height:500px;
position:relative;
overflow:hidden;
}
#horizontal {
width: auto;
height:20px;
padding-left:10px;
padding-right:30px;
animation: vertical 2.3s infinite linear;
position:relative;
}
#vertical { /* the ball */
background:#cd0;
width: 20px;
height:20px;
border-radius:20px;
animation: horizontal 1.9s infinite linear;
box-shadow:0 0 10px #0f0
}
#bat1, #bat2 {
background:#f00;
width: 10px;
height:60px;
margin-top:-10px;
position:absolute;
right:0px;
top:0px;
color:red;
animation: twitchy1 1.9s infinite linear;
}
#bat2 {
left:0;
animation: twitchy2 1.9s infinite linear;
background:#ff0
}
@keyframes vertical { /* flame pulses */
0% {
top:0%;
margin-top:0px
}
50% {
top:100%;
margin-top:-20px
}
100% {
top:0%;
margin-top:0px
}
}
@keyframes horizontal { /* flame pulses */
0% {
margin-left:0%;
}
50% {
margin-left:100%;
right:0px
}
100% {
margin-left:0%;
}
}
@keyframes twitchy1 { /* flame pulses */
0% {
top:-100px;
}
25% {
top:-40px;
}
30% {
top:40px;
}
35% {
top:-30px;
}
40% {
top:30px;
}
50% {
top:0px;
}
100% {
top:-100px;
}
}
@keyframes twitchy2 { /* flame pulses */
0% {
top:0%;
}
10% {
top:-40px;
}
50% {
top:150px;
}
90% {
top:20px;
}
95% {
top:-20px;
}
100% {
top: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