<div class="wrapper">
<div class="timer">
<span></span>
</div>
<div class="gameover">GAME OVER</div>
<h1>KILL THE BIRDS <span>(shoot the birds)</span></h1>
<h2>PURE CSS GAME - NO JS!</h2>
<input class="input-circle input-circle1" type="radio" id="circle1" >
<input class="input-circle input-circle2" type="radio" id="circle2" >
<input class="input-circle input-circle3" type="radio" id="circle3" >
<input class="input-circle input-circle4" type="radio" id="circle4" >
<input class="input-circle input-circle5" type="radio" id="circle5" >
<input class="input-circle input-circle6" type="radio" id="circle6" >
<label for="circle1" class="pajaro pajaro1"><span></span></label>
<label for="circle2" class="pajaro pajaro2"><span></span></label>
<label for="circle3" class="pajaro pajaro3"><span></span></label>
<label for="circle4" class="pajaro pajaro4"><span></span></label>
<label for="circle5" class="pajaro pajaro5"><span></span></label>
<label for="circle6" class="pajaro pajaro6"><span></span></label>
<div class="sum">SCORE:</div>
<footer>
<a href="https://twitter.com/eladsc">
<svg viewBox="0 0 24 24" style="width:40px; height:40px; fill: rgba(29,161,242,1.00);"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
@eladsc
</a>
</footer>
</div>
body{
counter-reset:birds;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow:hidden;
}
/*hide checkbox*/
input{position:fixed; left:-10px; top:-10px;}
h1{margin:0; text-align:center;}
h2{position:fixed; right:20px; bottom:0; font-size:18px; color:red;}
/*play area*/
.wrapper{
height:500px;
background: -webkit-linear-gradient(top, hsla(210,70%,80%,1) 0%,hsla(210,50%,100%,1) 100%);
position:relative;
cursor:crosshair;
}
/*count dead birds*/
.input-circle:checked{
counter-increment:birds;
}
.sum{position:fixed; left:45%; top:60px; font-size:24px; fonot-weight:bold;}
/*print to screen dead birds*/
.sum:after{
content: counter(birds);
}
.input-circle ~ .pajaro{
opacity:0;
transition:0.3s cubic-bezier(0,.43,1,0);
animation: move 8s infinite alternate;
}
.input-circle1:not(:checked) ~ .pajaro1,
.input-circle2:not(:checked) ~ .pajaro2,
.input-circle3:not(:checked) ~ .pajaro3,
.input-circle4:not(:checked) ~ .pajaro4,
.input-circle5:not(:checked) ~ .pajaro5,
.input-circle6:not(:checked) ~ .pajaro6
{
opacity:1;
}
.input-circle1:checked ~ .pajaro1 span,
.input-circle2:checked ~ .pajaro2 span,
.input-circle3:checked ~ .pajaro3 span,
.input-circle4:checked ~ .pajaro4 span,
.input-circle5:checked ~ .pajaro5 span,
.input-circle6:checked ~ .pajaro6 span
{
display:block;
}
.pajaro{
position:absolute;
left:0;
cursor:crosshair;
}
.pajaro>span{
display:none;position:absolute; z-index:2; left:-250%;bottom:-50%;
background-color:white; border:solid 2px #000; width:80px; height:30px; padding:10px; border-radius:50%;
}
.pajaro>span:before{
content:"I'm Dead!"; color:red; font-weight:bold;
}
.pajaro1{top:50px;
animation-delay: -2s!important;
transform:scale(0.9);
}
.pajaro2{
top:100px;
animation-delay: -1s!important;
transform:scale(0.8);
}
.pajaro3{
top:200px;
animation-delay: -3s!important;
transform:scale(1.4);
}
.pajaro4{top:50px;
animation-delay: -12s!important;
transform:scale(0.9);
}
.pajaro5{
top:100px;
animation-delay: -16s!important;
transform:scale(0.5);
}
.pajaro6{
top:200px;
animation-delay: -20s!important;
transform:scale(1.4);
}
@keyframes move{
0%{left:0%;}
20%{left:20%;top:50%; }
40%{top:30%; left:60%;}
60%{top:80%;left:80%;}
80%{top:10%; left:20%:}
100%{top:30%; left:20%; }
}
.timer{
background-color:#333; width:300px;height:50px;
position:fixed;
}
.timer span{
display:block;
background:repeating-linear-gradient(-45deg, #000, rgba(0, 0, 0, 0) 25px, #FFF 25px, #FFF 50px);
width:300px; height:50px;
animation:timer 20s linear;
}
.timer span:before{
content:"TIME LEFT";
display:block;
position:absolute; z-index:3;
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
line-height:50px;
font-size:25px;
color:red;
}
@keyframes timer{
0%{width:10px;}
100%{width:300px; display:block;}
}
.gameover{
position:fixed; z-index:100000; left:0; top:0; bottom:0; right:0; background-color:rgba(0,0,0,0.8);
animation:gameover 20s linear forwards;
font-size:80px; color:white; font-weight:bold; text-align:center;
text-indent:0;
line-height:500px;
}
@keyframes gameover{
0%{left:-5000px;bottom:100%;}
97%{left:-5000px;bottom:100%;}
100%{ left:0px;}
}
footer{position:fixed; left:0; bottom:0; padding:10px 20px;}
footer svg{vertical-align:middle;}
footer a{text-decoration:none; font-size:20px; color:rgba(29,161,242,1.00); vertical-align:middle;}
/*------------------------------------------------------ body of the bird
*/
.pajaro{
background:black;
border-radius: 50% 50% 20% 20%;
color:white;
line-height:20px;
letter-spacing: 2px;
font-size:0.8em;
text-align:center;
position:absolute;
margin-top:-20px; margin-left:-10px;
width:15px; height:15px;
animation:planeo 0.8s linear infinite;
z-index:999;
}
.pajaro:after,
.pajaro:before{
content:"";
position:absolute;
top:50%; left:50%;
}
/*------------------------------------------------------ bird wings
*/
.pajaro:after{
border-radius: 100% 100% 0 0;
box-shadow: inset 0px 5px 0 black;
width:100px; height:100px;
margin-top:-7px; margin-left:-50px;
transform-origin: 100% 0%;
animation:alas 3s linear infinite;
}
/*------------------------------------------------------ bird beak
*/
.pajaro:before{
background:#FFC37F;
border-radius: 100% 0% 20% 0%;
margin-top:3px; margin-left:-4px;
width:6px; height:6px;
transform:rotateZ(45deg);
}
/*------------------------------------------------------ wings animation
*/
@keyframes alas {
50%{
transform:rotateX(-1440deg);
}
}
/*------------------------------------------------------ bird animation
*/
@keyframes planeo {
40%{
transform:rotateZ(2deg) translateX(2px) translateY(10px) translateZ(0);
line-height:16px;
font-size:0.6em;
}
80%{
transform:rotateZ(-2deg) translateX(5px) translateY(8px) translateZ(0);
}
}
/**Second Version***
KILL THE BIRDS PURE CSS GAME - NO JS
------------------------------
Author: Elad Shechter
https://twitter.com/eladsc
https://il.linkedin.com/in/eladshechter/
https://medium.com/@elad
MY FACEBOOK GROUP
https://www.facebook.com/groups/css.master/
The Bird taken from:
-------------------------------
https://codepen.io/fixcl/pen/KhAqa
Author: Marco Barría
https://twitter.com/marco_bf
******/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.