css编写躲避激光炮的小鸟游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：css编写躲避激光炮的小鸟游戏代码，无js代码，div+css实现的，移动鼠标躲避激光炮的攻击。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          background: #333;
          color: #fff;
          font-family: Helvetica, sans-serif;
          font-weight: 300;
          
        }
        
        .game {
          margin: 25px auto;
          overflow: hidden;
          position: relative;
          width: 350px;
          height: 400px;
          counter-reset: score -1;
        
        }
        .game:hover {
             
          counter-increment: score;
          
        }
        .game:hover .board:hover {
          animation: scoring 100s 1.6s linear infinite;
        }
        .game:hover .board:hover ~ .cannon .laser {
          animation: fireLaser 2s linear infinite;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(1) .laser {
          animation-delay: 1s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(2) .laser {
          animation-delay: 2s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(3) .laser {
          animation-delay: 3s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(4) .laser {
          animation-delay: 3s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(5) .laser {
          animation-delay: 5s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(6) .laser {
          animation-delay: 3s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(7) .laser {
          animation-delay: 7s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(8) .laser {
          animation-delay: 5s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(9) .laser {
          animation-delay: 8s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(10) .laser {
          animation-delay: 10s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(11) .laser {
          animation-delay: 4s;
        }
        .game:hover .board:hover ~ .cannon:nth-of-type(12) .laser {
          animation-delay: 7s;
        }
        .game:hover:hover .score::after {
          content: counter(score);
        }
        
        .board {
          background-color: #cccccc;
          background-image: linear-gradient(90deg, transparent, transparent 48.3333333333px, #aaa 48.3333333333px, #aaa 50px), linear-gradient(transparent, transparent 48.3333333333px, #aaa 48.3333333333px, #aaa 50px), linear-gradient(45deg, transparent, #fff);
          background-size: 50px 50px;
          border-top: 1.6666666667px solid #aaa;
          border-left: 1.6666666667px solid #aaa;
          cursor: url(//repo.bfw.wiki/bfwrepo/image/5f4262460e0f0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90) 12 24, default;
          position: absolute;
          right: 0;
          bottom: 50px;
          width: 300px;
          height: 300px;
        }
        
        .cannon {
          background: url(//repo.bfw.wiki/bfwrepo/icon/61adf1ca91aee.png) center no-repeat;
          background-size: 35px 50px;
          position: absolute;
          width: 50px;
          height: 50px;
        }
        
        .horz {
          top: 0;
          transform: rotate(90deg);
        }
        .horz:nth-of-type(1) {
          left: 50px;
        }
        .horz:nth-of-type(2) {
          left: 100px;
        }
        .horz:nth-of-type(3) {
          left: 150px;
        }
        .horz:nth-of-type(4) {
          left: 200px;
        }
        .horz:nth-of-type(5) {
          left: 250px;
        }
        .horz:nth-of-type(6) {
          left: 300px;
        }
        
        .vert {
          left: 0;
        }
        .vert:nth-of-type(7) {
          top: 50px;
        }
        .vert:nth-of-type(8) {
          top: 100px;
        }
        .vert:nth-of-type(9) {
          top: 150px;
        }
        .vert:nth-of-type(10) {
          top: 200px;
        }
        .vert:nth-of-type(11) {
          top: 250px;
        }
        .vert:nth-of-type(12) {
          top: 300px;
        }
        
        .laser {
          background: #fff;
          box-shadow: 0px 0px 16.6666666667px #f22 inset;
          border-radius: 25px;
          display: block;
          position: absolute;
          top: 1.25px;
          left: 0.625px;
          width: 47.5px;
          height: 47.5px;
          transform: scale(0, 0);
        }
        
        .score {
          background: #333;
          font-size: 25px;
          line-height: 50px;
          position: absolute;
          left: 0;
          bottom: 0;
          text-align: center;
          width: 350px;
          height: 50px;
        }
        .score::after {
          content: "0";
        }
        
        .help {
          border-top: 1px solid #111111;
          line-height: 24px;
          margin: auto;
          width: 240px;
        }
        .help p {
          text-align: center;
        }
        .help strong {
          font-weight: 400;
        }
        
        @keyframes fireLaser {
          0% {
            transform: scale(0, 0);
            width: 47.5px;
          }
          25% {
            transform: scale(0.5, 0.5);
            width: 47.5px;
          }
          27.5% {
            transform: scale(1, 1) translateX(12.5px);
            width: 47.5px;
          }
          30% {
            transform: scale(1, 1) translateX(12.5px);
            width: 400px;
          }
          40% {
            transform: scale(1, 1.1) translateX(12.5px);
            width: 400px;
          }
          50% {
            transform: scale(1, 1) translateX(12.5px);
            width: 400px;
          }
          60% {
            transform: scale(0.9, 0) translateX(12.5px);
            width: 400px;
          }
          100% {
            transform: scale(0.9, 0) translateX(12.5px);
            width: 50px;
          }
        }
        @keyframes scoring {
          0% {
            counter-reset: score 0;
          }
          1% {
            counter-reset: score 1;
          }
          2% {
            counter-reset: score 2;
          }
          3% {
            counter-reset: score 3;
          }
          4% {
            counter-reset: score 4;
          }
          5% {
            counter-reset: score 5;
          }
          6% {
            counter-reset: score 6;
          }
          7% {
            counter-reset: score 7;
          }
          8% {
            counter-reset: score 8;
          }
          9% {
            counter-reset: score 9;
          }
          10% {
            counter-reset: score 10;
          }
          11% {
            counter-reset: score 11;
          }
          12% {
            counter-reset: score 12;
          }
          13% {
            counter-reset: score 13;
          }
          14% {
            counter-reset: score 14;
          }
          15% {
            counter-reset: score 15;
          }
          16% {
            counter-reset: score 16;
          }
          17% {
            counter-reset: score 17;
          }
          18% {
            counter-reset: score 18;
.........完整代码请登录后点击上方下载按钮下载查看