css布局鱼在水中游及轮船水草效果-html代码-BFW代码库

代码语言：html

代码描述：css布局鱼在水中游及轮船水草效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --colorOne: gold;
  --colorTwo:orange;
  --colorThree: darkorange;
  --eyeColor:black;
  --eyeCircle:white;
}

#fun {
  color:white;
  font-family:monospace;
  padding:10px;
}
#box {
  position:absolute;
  top:100px;
  right:100px;
  bottom:100px;
  left:100px;
/*   outline:1px solid red; */
}

#fish {
  position:absolute;
  width:200px;
  height:200px;
  left:200px;
  top:200px;
  transform-origin:center center;
  transition:5s;
}

.flip {
  animation:flip .25s linear forwards;
}
@keyframes flip {
  0% { transform:scaleX(1); }
  100% { transform:scaleX(-1); }
}
.unFlip {
  animation:unflip .25s linear forwards;
}
@keyframes unflip {
  0% { transform:scaleX(-1); }
  100% { transform:scaleX(1); }
}

#body {
  width:200px;
  height:200px;
  background:radial-gradient(circle at -100px 300px, var(--colorOne) 80%, var(--colorTwo) 80%);
  border-radius:75% 5%;
  transform:rotate(45deg);
  z-index:-1;
}

#eye {
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--eyeColor);
  border:8px solid var(--eyeCircle);
  position:absolute;
  left:170px;
  top:65px;
}

#fins {
  width:75px;
  height:50px;
  background:var(--colorThree);
  border-radius:50px 0px 0px 0px;
  position:absolute;
  top:-10px;
  left:40px;
  transform:rotateZ(45deg);
  z-index:-1;
}

#fins:after {
  width:75px;
  height:50px;
  background:var(--colorThree);
  border-radius:0px 50px 0px 0px;
  position:absolute;
  top:120px;
  left:120px;
  z-index:-1;
  content:'';
  transform:rotateZ(90deg);
}
#tailfins {
  position:absolute;
  top:115px;
  left:-25px;
  transform:rotateZ(25deg);
  animation:swim 1.5s linear infinite;
}
@keyframes swim {
  25% { transform:rotateZ(25deg) rotateX(25deg)  }
  75% { transform:rotateZ(25deg) rotateX(-25deg)  }
}
#tailfins:before {
  width:75px;
  height:75px;
  background:linear-gradient(to bottom left, var(--colorOne) 35%, var(--colorThree));
  content:'';
  position:absolute;
  border-radius:100% 5%;
  left:40px;
  top:15px;
/*   z-index:-1; */
  transform:rotate(-50deg);
}
#tailfins:after {
  width:75px;
  height:75px;
  background:linear-gradient(to bottom left, var(--colorOne) 35%, var(--colorThree));
  content:'';
  position:absolute;
  border-radius:100% 5%;
  left:0px;
  top:0px;
/*   z-index:-1; */
}

#scales, #scales2, #scales3  {
  width:35px;
  height:35px;
  border-radius:50%;
  border-left:5px solid var(--colorThree);
  transform:rotate(0deg);
  position:absolute;
  top:82.5px;
  left:75px;
  z-index:9;
}
#scales:before, #scales2:before, #scales3:before {
  width:35px;
  height:35px;
  border-radius:50%;
  border-left:5px solid var(--colorThree);
  transform:rotate(0deg);
  position:absolute;
  top:-35px;
  left:0px;
  z-index:9;
  content:'';
}
#scales:after, #scales2:after, #scales3:after {
  width:35px;
  height:35px;
  border-radius:50%;
  border-left:5px solid var(--colorThree);
  transform:rotate(0deg);
  position:absolute;
  top:35px;
  left:0px;
  z-index:9;
  content:'';
}

#scales2 {
  transform:scale(.8);
  left:40px;
}
#scales3 {
  transform:scale(.6);
  left:5px;
}

.bubbles {
  background:rgba(255,255,255,.05);
/*   border:1px solid rgba(255,255,255,.2); */
  border-radius:50%;
  animation:bubble 20s linear infinite;
  position:absolute;
  top:101%;
}
.bubbles:after {
  content:'';
  width:70%;
  height:70%;
  border-top:1px solid rgba(255,255,255,.25);
  position:absolute;
  left:15%;
  top:15%;
  border-radius:50%;
  transform:rotate(45deg);
}

@keyframes bubble {
  0% { top:101%; transform:translateX(0%); opacity:0;}
  10% { transform:translateX(50%);opacity:1 }
  20% {  transform:translateX(-50%);opacity:1 }
  30% { transform:translateX(50%);opacity:1 }
  40% { transform:translateX(-50%);opacity:1 }
  50% {  transform:translateX(50%);opacity:1 }
  60% {  transform:translateX(-50%);opacity:1}
  70% { transform:translateX(50%); }
  80% { transform:translateX(-50%);}
  90% {  transform:translateX(50%) }
  100% { top:10%; transform:translateX(0%); opacity:0;}
}

.light {
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  filter:blur(3px);
}
.light:nth-child(odd){
  background:linear-gradient(-35deg,transparent 55%,rgba(255,255,255,.05) 55%, rgba(255,255,255,.05) 65%, transparent 65%, transparent 70%,rgba(255,255,255,.05) 70%, rgba(255,255,255,.05) 75%, transparent 75%);
  z-index:-1;
}

.light:nth-child(even){
  background:linear-gradient(-75deg,transparent 25%,rgba(255,255,255,.15) 25%, rgba(255,255,255,.15) 35.........完整代码请登录后点击上方下载按钮下载查看