纯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.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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0