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

css编写躲避激光炮的小鸟游戏代码

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