div+css实现给鱼缸加水养活小鱼互动小游戏代码-html代码-BFW代码库

div+css实现给鱼缸加水养活小鱼互动小游戏代码

代码语言：html

所属分类：游戏

代码描述：div+css实现给鱼缸加水养活小鱼互动小游戏代码，一旦鱼缸没水，就要点击水龙头加水，否则鱼儿就死了。

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
html {
  font-size: 5vh;
}
@media screen and (min-height: 400px) {
  html {
    font-size: 19px;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #eb80b1;
}

@keyframes swimming {
  0%, 100% {
    transform: translateX(0);
  }
  22.5% {
    transform: translateX(2.5rem) skewY(-5deg);
  }
  45% {
    transform: translateX(6rem) translateY(-1rem) skewY(5deg);
  }
  55% {
    transform: translateX(5rem) translateY(-0.5rem) scaleX(-1);
  }
  95% {
    transform: translateX(0) scaleX(-1) skewY(10deg);
  }
}
@keyframes dead {
  0%, 100% {
    transform: translateX(2.5rem);
  }
  22.5% {
    transform: translateX(2.5rem) translateY(-1rem) skewY(-5deg);
  }
  45% {
    transform: translateX(2.5rem) skewY(5deg);
  }
  55% {
    transform: translateX(2.5rem) translateY(-1rem) skewY(-5deg);
  }
  95% {
    transform: translateX(2.5rem) skewY(5deg);
  }
}
.fishbowl {
  position: relative;
  width: 15rem;
  height: 15rem;
}
.fishbowl__background {
  position: relative;
  width: 100%;.........完整代码请登录后点击上方下载按钮下载查看