Skip to content

Instantly share code, notes, and snippets.

@LukyVj

LukyVj/dabblet.css

Created April 22, 2012 16:19
Show Gist options
  • Save LukyVj/2465033 to your computer and use it in GitHub Desktop.
Save LukyVj/2465033 to your computer and use it in GitHub Desktop.
Download ZIP
First, create the keyframes behavior
Raw
dabblet.css
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; }
}
Raw
dabblet.html
<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>
Raw
settings.json
{"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