Skip to content

Instantly share code, notes, and snippets.

@alexmwalker

alexmwalker/dabblet.css

Created February 18, 2012 01:06
Show Gist options
  • Save alexmwalker/1856665 to your computer and use it in GitHub Desktop.
Save alexmwalker/1856665 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Pong *
Raw
dabblet.css
/**
* CSS3 Pong *
*/
@import url(http://fonts.googleapis.com/css?family=VT323);
body{
background: #000;
color:#070;
font-family:'VT323', Courier, "Courier New", monospace;
}
#court {
margin-top:40px;
border:5px dotted #0a0;
border-width:5px 0;
height:500px;
position:relative;
overflow:hidden;
}
#court::before {
content: "";
height:100%;
display:block;
top:0;
width:5px;
left:48%;
position:absolute;
background:#0a0
}
#court::after {
content: "0 0";
text-align:center;
font-size:100px;
height:100%;
color:#070;
display:block;
top:0;
width:40%;
left:28%;
position:absolute;
}
h1, h2, p{
text-shadow:0 0 5px #050
}
p{
font-size:24px;
}
#horizontal {
width: auto;
height:20px;
padding-left:5px;
padding-right:20px;
animation: vertical 2.3s infinite linear;
position:relative;
}
#vertical { /* the ball */
background:#ce0;
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 { /* vertical movement */
0% {
top:0%;
margin-top:0px
}
50% {
top:100%;
margin-top:-20px
}
100% {
top:0%;
margin-top:0px
}
}
@keyframes horizontal { /* horizontal movement */
0% {
margin-left:0%;
}
5% {
margin-left:15%;
}
50% {
margin-left:100%;
right:0px
}
55% {
margin-left:85%;
right:0px
}
100% {
margin-left:0%;
}
}
@keyframes twitchy1 { /* player 2 */
0% {
top:-130px;
}
35% {
top:-30px;
}
40% {
top:30px;
}
50% {
top:0px;
}
100% {
top:-130px;
}
}
@keyframes twitchy2 { /* player 1 */
0% {
top:0%;
}
10% {
top:-70px;
}
50% {
top:120px;
}
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>
<h2>CSS3 Epic Pong</h2>
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