纯css实现的射击游戏代码-html代码-BFW代码库

纯css实现的射击游戏代码

代码语言：html

所属分类：游戏

代码描述：纯css实现的射击游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

<style>
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.........完整代码请登录后点击上方下载按钮下载查看