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%;
  height: 100%;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(transparent 10%, #FFF 150%);
  border-bottom: 1px solid #FFF;
}
.fishbowl:before {
  content: "";
  position: absolute;
  bottom: 9.5rem;
  left: 2rem;
  width: 100%;
  height: 30%;
  border-radius: 50%;
  box-shadow: -4rem 10rem 1rem 0 rgba(0, 0, 56, 0.3);
  transform: rotate(5deg);
}
.fishbowl:after {
  content: "";
  position: absolute;
  top: 12.5%;
  left: 2.5%;
  width: 95%;
  height: 85%;
  border-radius: 40%;
  background: linear-gradient(135deg, transparent 50%, #FFF 150%);
}
.fishbowl__bottom {
  position: absolute;
  bottom: 5%;
  left: 17.5%;
  width: 65%;
  height: 20%;
  border-radius: 50%;
  background: linear-gradient(#F5FCCD, #ff7d66 200%);
}
.fishbowl__decoration {
  position.........完整代码请登录后点击上方下载按钮下载查看