Created
March 21, 2012 02:42
-
-
Save alexmwalker/2143879 to your computer and use it in GitHub Desktop.
Playable Pong by
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Playable Pong by 𝓐𝒍𝒆𝒙 𝓜 𝓦𝓪𝓵𝓴𝓮𝓻 | |
| working - not scoring | |
| */ | |
| body{overflow:hidden; | |
| font-family:'Arial Narrow', sans-serif; | |
| background:#000; | |
| margin:0; | |
| padding:0; | |
| color:#0f0; | |
| text-align:center; | |
| text-transform:uppercase | |
| } | |
| body:before{ /*scan line effect */ | |
| content:""; | |
| position:absolute; | |
| margin:0; | |
| padding:0; | |
| background-image:linear-gradient(top, hsla(0,0%,0%,.3) 0%,hsla(0,0%,0%,0) 100%); | |
| background-size:100% 4px; | |
| width:100%; | |
| height:100%; | |
| z-index:99; | |
| pointer-events: none; | |
| } | |
| body *{ | |
| text-shadow:0px 0px 3px rgba(90,255,90,.9), 0px 0px 3px rgba(90,255,90,.9), 0px 0px 7px rgba(90,255,90,.9) | |
| } | |
| h1{ | |
| text-align:center; | |
| font-size:45px | |
| } | |
| #court{ | |
| margin:29px auto; | |
| width:600px; | |
| height:301px; | |
| position:relative; | |
| border: 3px dashed #3f3; | |
| border-width:3px ; | |
| cursor: url(http://sitepoint.com/examples/css1k/bat.cur), text; | |
| text-shadow:0px 0px 7px rgba(90,255,90,.9), 0px 0px 7px rgba(90,255,90,.9) | |
| } | |
| #court:before{/*net*/ | |
| left:50%; | |
| content:""; | |
| width:10px; | |
| height:300px; | |
| position:absolute; | |
| border-left: 3px dashed #3f3; | |
| } | |
| #ball{ | |
| position:absolute; | |
| width:20px; | |
| height:20px; | |
| display:block; | |
| background:#3f3; | |
| border-radius:50%; | |
| box-shadow:0px 0px 7px rgba(90,255,90,.9), 0px 0px 7px rgba(90,255,90,.9); | |
| transform: translate(0px,0px); | |
| animation: fadein 2s 1 linear; | |
| } | |
| #horizontal{ | |
| outline:1px dashed #f00; | |
| position:relative; | |
| top:50% | |
| } | |
| #target{ | |
| display:block; | |
| position:absolute; | |
| width:50px; | |
| height:50px; | |
| margin:-20px 0 0 -20px; | |
| border-radius:0%; | |
| /* uncomment the next two lines to see the target zone working */ | |
| /* | |
| background:rgba(255,200,200,.2); | |
| border:1px dashed cyan; | |
| */ | |
| animation: fadein 2s 1 linear; | |
| } | |
| #horizontal:hover { | |
| animation: updown 2.3s infinite linear; | |
| } | |
| #target:hover{ | |
| animation: targetzone 2.9s infinite; | |
| } | |
| #target:hover + #ball{ | |
| animation: leftright 2.9s infinite linear; | |
| } | |
| #target:hover + #ball + #player2{ | |
| animation: twitchy 2.9s infinite linear backwards; | |
| } | |
| ol#pl2{ | |
| outline:1px dashed #f00; | |
| } | |
| ol#pl2 li{ | |
| list-style:none; | |
| display:none | |
| } | |
| #player2{ | |
| background:#3f3; | |
| width:7px; | |
| height:30px; | |
| right:4px; | |
| top:0px; | |
| position:absolute; | |
| animation: fadein 2s 1 linear 2s; | |
| } | |
| ol{ | |
| font-size:64px; | |
| height:64px; | |
| overflow:ghidden; | |
| position:absolute; | |
| top:-20%; | |
| } | |
| #pl1{ | |
| left:28%; | |
| } | |
| #pl2{ | |
| left:54%; | |
| } | |
| /* Animations */ | |
| @keyframes updown{ | |
| 0%,50%,100% {transform: translate3d(0,0,0)} | |
| 25% {transform: translate3d(0,142px,0)} | |
| 75% {transform: translate3d(0,-136px,0)} | |
| } | |
| @keyframes leftright { | |
| 0%,100% {transform: translate3d(10px, 0, 0);} | |
| 50% {transform: translate3d(570px, 0, 0)} | |
| } | |
| @keyframes targetzone{ | |
| 0%,3% {width:50px; height:50px; margin:-20px 0 0 -20px} /* ball strike */ | |
| 4%,100% {width:2000px; height:900px; margin:-450px 0 0 -450px} | |
| } | |
| @keyframes twitchy{ /* make players seem real */ | |
| 0%, | |
| 100% {transform: translate3d(0,0,0)} | |
| 25% {transform: translate3d(0,-25px,0)} | |
| 30% {transform: translate3d(0,-70px,0)} | |
| 35% {transform: translate3d(0,-25px,0)} | |
| 40% {transform: translate3d(0,-50px,0)} | |
| 50% {transform: translate3d(0,0px,0)} | |
| 75% {transform: translate3d(0,-30px,0)} | |
| 75% {transform: translate3d(0,60px,0)} | |
| } | |
| @keyframes fadein{/* fade ball in*/ | |
| 0% {width:0; height:0} | |
| 90% {width:0; height:0} | |
| 100%{width:20px; height:20px} | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- content to be placed inside <body>…</body> --> | |
| <h1>CSS3 PONG</h1> | |
| <div id="court"> | |
| <div id="horizontal"> | |
| <span id="target"></span> | |
| <span id="ball"></span> | |
| <span id="player2"></span> | |
| </div> | |
| <ol id="pl2"> | |
| <li>0</li> | |
| <li>1</li> | |
| <li>2</li> | |
| <li>3</li> | |
| <li>4</li> | |
| <li>5</li> | |
| </ol> | |
| </div> | |
| <div id="scoreinputs"> | |
| </div> | |
| <p>Bringing ol' school Pong to you via the magic of CSS3 - Javascript free</> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment