<style>
//based on https://codepen.io/elad2412/pen/hBaqo
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:400px;
width:600px;
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: -4s!important;
transform:scale(0.5);
}
.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;}
/*------------------------------------------------------ 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);
}
}
</style>
<br />
<div class="wrapper">
<div class="timer">
<span></span>
</div>
<div class="gameover"><a href="http://xyzcode.blogspot.com/2017/07/css-only-shooting.html">GAME OVER</a></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://codepen.io/elad2412/pen/hBaqo">based on https://codepen.io/elad2412/pen/hBaqo</a></footer>
</div>
//based on https://codepen.io/elad2412/pen/hBaqo
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:400px;
width:600px;
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: -4s!important;
transform:scale(0.5);
}
.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;}
/*------------------------------------------------------ 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);
}
}
</style>
<br />
<div class="wrapper">
<div class="timer">
<span></span>
</div>
<div class="gameover"><a href="http://xyzcode.blogspot.com/2017/07/css-only-shooting.html">GAME OVER</a></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://codepen.io/elad2412/pen/hBaqo">based on https://codepen.io/elad2412/pen/hBaqo</a></footer>
</div>
