Created
April 22, 2012 16:19
-
-
Save LukyVj/2465033 to your computer and use it in GitHub Desktop.
First, create the keyframes behavior
This file contains 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
body { | |
background: -webkit-radial-gradient(black 5%, transparent 16%) 0 0, -webkit-radial-gradient(black 15%, transparent 16%) 8px 8px, -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; | |
background-color: #666; | |
background-size: 16px 16px; | |
} | |
h1{ | |
margin: 0 0 30px 0; | |
color: #222; | |
font-family: 'League Gothic', Arial, Helvetica, sans-serif; | |
line-height: 0.9em; | |
letter-spacing: 0.02em; | |
} | |
a{text-decoration:none; | |
color:#fff;} | |
p, | |
H2 { color: #fff } | |
footer { | |
position: fixed; | |
bottom: 0px; | |
background: rgba(0,0,0,1); | |
width: 100%; | |
height:auto; | |
margin: -10px; | |
padding: 10px; | |
} | |
#close:target > footer{display:none;} | |
.win{ | |
text-shadow: 1px 1px 0px rgba(0,255,0,.6), | |
0px 0px 4px rgba(0,255,0,.3); | |
} | |
.YouLoose,.YouLooseDelay{ | |
text-shadow: 1px 1px 0px rgba(255,0,0,.6), | |
0px 0px 4px rgba(255,0,0,.3);} | |
.ball { | |
border-radius: 100px; | |
width: 100px; | |
height: 100px; | |
background: #FFF; | |
position: absolute; | |
box-shadow: 0 0 10px #000; | |
background-color: #026873; | |
background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); | |
background-size: 13px, 29px, 37px, 53px; | |
} | |
/* First, create the keyframes behavior */ | |
/* FIRST BALL MOOVE */ | |
@-webkit-keyframes FirstMove { | |
0% { | |
top: 100px; | |
left: 40px; | |
} | |
15% { | |
top: 400px; | |
left: 100px; | |
} | |
20% { | |
top: 600px; | |
left: 80px; | |
} | |
35% { | |
top: 200px; | |
left: 140px; | |
} | |
58% { | |
top: 300px; | |
left: 400px; | |
} | |
72% { | |
top: 60px; | |
left: 600px; | |
} | |
80% { | |
top: 300px; | |
left: 900px; | |
} | |
95% { | |
top: 90px; | |
left: 400px; | |
} | |
100% { | |
top: 145px; | |
left: 40px; | |
} | |
} | |
@-moz-keyframes FirstMove { | |
0% { | |
top: 100px; | |
left: 40px; | |
} | |
15% { | |
top: 400px; | |
left: 100px; | |
} | |
20% { | |
top: 600px; | |
left: 80px; | |
} | |
35% { | |
top: 200px; | |
left: 140px; | |
} | |
58% { | |
top: 300px; | |
left: 400px; | |
} | |
72% { | |
top: 60px; | |
left: 600px; | |
} | |
80% { | |
top: 300px; | |
left: 200px; | |
} | |
95% { | |
top: 90px; | |
left: 400px; | |
} | |
100% { | |
top: 145px; | |
left: 40px; | |
} | |
} | |
@-ms-keyframes FirstMove { | |
0% { | |
top: 100px; | |
left: 40px; | |
} | |
15% { | |
top: 400px; | |
left: 100px; | |
} | |
20% { | |
top: 600px; | |
left: 80px; | |
} | |
35% { | |
top: 200px; | |
left: 140px; | |
} | |
58% { | |
top: 300px; | |
left: 400px; | |
} | |
72% { | |
top: 60px; | |
left: 600px; | |
} | |
80% { | |
top: 300px; | |
left: 200px; | |
} | |
95% { | |
top: 90px; | |
left: 400px; | |
} | |
100% { | |
top: 145px; | |
left: 40px; | |
} | |
} | |
/*SECOND BALL MOOVE */ | |
@-webkit-keyframes SecondMove { | |
0% { | |
top: 130px; | |
left: 60px; | |
background: lightgreen; | |
} | |
3% { | |
background-color: #026873; | |
background-image: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); | |
background-size: 13px, 29px, 37px, 53px; | |
} | |
25% { | |
top: 200px; | |
left: 100px; | |
} | |
22% { | |
top: 300px; | |
left: 180px; | |
} | |
35% { | |
top: 250px; | |
left: 40px; | |
} | |
50% { | |
top: 300px; | |
left: 400px; | |
} | |
77% { | |
top: 60px; | |
left: 250px; | |
} | |
83% { | |
top: 30px; | |
left: 280px; | |
} | |
92% { | |
top: 190px; | |
left: 460px; | |
} | |
100% { | |
top: 245px; | |
left: 140px; | |
} | |
} | |
@-moz-keyframes SecondMove { | |
0% { | |
top: 130px; | |
left: 60px; | |
} | |
25% { | |
top: 200px; | |
left: 100px; | |
} | |
22% { | |
top: 300px; | |
left: 180px; | |
} | |
35% { | |
top: 250px; | |
left: 40px; | |
} | |
50% { | |
top: 300px; | |
left: 400px; | |
} | |
77% { | |
top: 60px; | |
left: 250px; | |
} | |
83% { | |
top: 30px; | |
left: 280px; | |
} | |
92% { | |
top: 190px; | |
left: 460px; | |
} | |
100% { | |
top: 245px; | |
left: 140px; | |
} | |
} | |
@-ms-keyframes SecondMove { | |
0% { | |
top: 130px; | |
left: 60px; | |
} | |
25% { | |
top: 200px; | |
left: 100px; | |
} | |
22% { | |
top: 300px; | |
left: 180px; | |
} | |
35% { | |
top: 250px; | |
left: 40px; | |
} | |
50% { | |
top: 300px; | |
left: 400px; | |
} | |
77% { | |
top: 60px; | |
left: 250px; | |
} | |
83% { | |
top: 30px; | |
left: 280px; | |
} | |
92% { | |
top: 190px; | |
left: 460px; | |
} | |
100% { | |
top: 245px; | |
left: 140px; | |
} | |
} | |
/*THIRD BALL MOOVE */ | |
@-webkit-keyframes ThirdMove { | |
0% { | |
top: 130px; | |
left: 60px; | |
} | |
15% { | |
top: 200px; | |
left: 100px; | |
} | |
25% { | |
top: 300px; | |
left: 180px; | |
} | |
38% { | |
top: 250px; | |
left: 40px; | |
} | |
55% { | |
top: 305px; | |
left: 420px; | |
} | |
78% { | |
top: 160px; | |
left: 50px; | |
} | |
85% { | |
top: 380px; | |
left: 80px; | |
} | |
95% { | |
top: 290px; | |
left: 120px; | |
} | |
100% { | |
top: 145px; | |
left: 170px; | |
} | |
} | |
@-moz-keyframes SecondMove { | |
0% { | |
top: 130px; | |
left: 60px; | |
} | |
25% { | |
top: 200px; | |
left: 100px; | |
} | |
22% { | |
top: 300px; | |
left: 180px; | |
} | |
35% { | |
top: 250px; | |
left: 40px; | |
} | |
50% { | |
top: 305px; | |
left: 420px; | |
} | |
77% { | |
top: 160px; | |
left: 50px; | |
} | |
83% { | |
top: 380px; | |
left: 80px; | |
} | |
92% { | |
top: 290px; | |
left: 120px; | |
} | |
100% { | |
top: 145px; | |
left: 170px; | |
} | |
} | |
@-ms-keyframes SecondMove { | |
0% { | |
top: 130px; | |
left: 60px; | |
} | |
25% { | |
top: 200px; | |
left: 100px; | |
} | |
22% { | |
top: 300px; | |
left: 180px; | |
} | |
35% { | |
top: 250px; | |
left: 40px; | |
} | |
50% { | |
top: 300px; | |
left: 400px; | |
} | |
77% { | |
top: 60px; | |
left: 250px; | |
} | |
83% { | |
top: 30px; | |
left: 280px; | |
} | |
92% { | |
top: 190px; | |
left: 460px; | |
} | |
100% { | |
top: 245px; | |
left: 140px; | |
} | |
} | |
/* WHEN YOU WIN */ | |
@-webkit-keyframes WIN { | |
0% { } | |
100% { } | |
} | |
@-moz-keyframes SecondMove { | |
0% { } | |
100% { } | |
} | |
@-ms-keyframes SecondMove { | |
0% { } | |
100% { } | |
} | |
/* Then apply animations to the differents elements */ | |
#FirstBall { | |
-webkit-animation: FirstMove 10s infinite alternate; | |
-moz-animation: FirstMove 10s infinite alternate; | |
-ms-animation: FirstMove 10s infinite alternate; | |
} | |
#SecondBall { | |
-webkit-animation: SecondMove 7s infinite alternate; | |
-moz-animation: SecondMove 7s infinite alternate; | |
-ms-animation: SecondMove 7s infinite alternate; | |
} | |
#ThirdBall { | |
-webkit-animation: ThirdMove 15s infinite alternate; | |
-moz-animation: ThirdMove 15s infinite alternate; | |
-ms-animation: ThirdMove 15s infinite alternate; | |
} | |
/* Now it's time to code the behavior */ | |
/* When you win */ | |
#YouWin { | |
position: absolute; | |
visibility: hidden; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
background: rgba(0,0,0,0.8); | |
color: #0bd128; | |
text-align: center; | |
font-size: 70px; | |
} | |
#SecondBall:active ~ #YouWin { | |
width: 100%; | |
height: 100%; | |
visibility: visible; | |
-webkit-animation: WIN 150s infinite alternate; | |
-moz-animation: WIN 150s infinite alternate; | |
-ms-animation: WIN 150s infinite alternate; | |
} | |
/*When you loose */ | |
.YouLoose { | |
position: absolute; | |
visibility:hidden; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
background: rgba(0,0,0,0.8); | |
color: #F00; | |
text-align: center; | |
font-size: 70px; | |
} | |
.YouLooseDelay{ | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 100%; | |
background: rgba(0,0,0,0.8); | |
color: #F00; | |
text-align: center; | |
font-size: 70px; | |
-webkit-animation: LooseDelay 10s ease; | |
-moz-animation: LooseDelay 10s ease; | |
-ms-animation: LooseDelay 10s ease; | |
} | |
.loose:active ~ .YouLoose{ | |
width: 100%; | |
height: 100%; | |
visibility: visible; | |
} | |
/* Loose timelapse */ | |
@-webkit-keyframes LooseDelay { | |
0% { visibility:hidden;} | |
99%{ visibility:hidden;} | |
100% { visibility:visible; } | |
} | |
@-moz-keyframes LooseDelay { | |
0% { opacity:0;} | |
100% { opacity:1; } | |
} | |
@-ms-keyframes LooseDelay { | |
0% { opacity:0;} | |
100% { opacity:1; } | |
} |
This file contains 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
<div class="ball loose" id="FirstBall"></div> | |
<div class="ball" id="SecondBall"></div> | |
<div class="ball loose" id="ThirdBall"></div> | |
<div class="win" id="YouWin"> | |
<h1>YOU WIN !</h1> | |
</div> | |
<div class="YouLoose"> | |
<h1>OOOPS</h1> | |
</div> | |
<div class="YouLooseDelay"> | |
<h1>LOOSER !</h1> | |
<h2><a href="#">Try again</a></h2> | |
</div> | |
<footer id="close"> | |
<h2>The clicking game</h2> | |
<p>At the beginning of the game one of the circles will blink in green. Try to catch it to win the game! Just click on it </p> | |
<a href="#close">start !</a> | |
</footer> |
This file contains 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":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment