纯css实现海底鱼儿游玩动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：纯css实现海底鱼儿游玩动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
* {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #bdf;
  min-height: 100vh;
}

.fish {
  position: fixed;
  top: 200px;
  width: 110px;
  height: 90px;
  background-color: var(--fColor);
  background-image: -webkit-gradient(linear, right top, left top, from(var(--fColor)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3)));
  background-image: linear-gradient(270deg, var(--fColor), transparent 50%), linear-gradient(transparent, rgba(255, 255, 255, 0.3) 30%, rgba(0, 0, 0, 0.3));
  border-radius: 50%;
  -webkit-transform: rotate(30deg) translateX(-50%);
          transform: rotate(30deg) translateX(-50%);
  -webkit-filter: blur(1px) drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
          filter: blur(1px) drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
  -webkit-animation: swim 20s var(--fishDelay) linear infinite;
          animation: swim 20s var(--fishDelay) linear infinite;
}
.fish:nth-child(1) {
  --swimX: -30%;
  --fishDelay: -10s;
  --fColor: #880E4F;
}
.fish:nth-child(2) {
  --swimX: -10%;
  --fishDelay: -2s;
  --fColor: #B71C1C;
}
.fish:nth-child(3) {
  --swimX: 10%;
  --fishDelay: -12s;
  --fColor: #BF360C;
}
.fish:nth-child(4) {
  --swimX: 30%;
  --fishDelay: -4s;
  --fColor: #E65100;
}
.fish:nth-child(5) {
  --swimX: 50%;
  --fishDelay: -14s;
  --fColor: #FF6F00;
}
.fish:nth-child(6) {
  --swimX: 70%;
  --fishDelay: -6s;
  --fColor: #F57F17;
}
.fish:nth-child(7) {
  --swimX: 90%;
  --fishDelay: -16s;
  --fColor: #827717;
}
.fish:nth-child(8) {
  --swimX: 110%;
  --fishDelay: -8s;
  --fColor: #33691E;
}
.fish:nth-child(9) {
  --swimX: 130%;
  --fishDelay: 0s;
  --fColor: #1B5E20;
}
@-webkit-keyframes swim {
  from {
    left: calc(50% - 1400px);
    top: calc(var(--swimX) - 700px);
  }
  to {
    left: calc(50% + 1400px);
    top: calc(var(--swimX) + 700px);
  }
}
@keyframes swim {
  from {
    left: calc(50% - 1400px);
    top: calc(var(--swimX) - 700px);
  }
  to {
    left: calc(50% + 1400px);
    top: calc(var(--swimX) + 700px);
  }
}
.fish .eyes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.fish .eyes::before, .fish .eyes::after {
  content: '';
  position: absolute;
  left: 55%;
  width: 20px;
  height: 20px;
  background-color: teal;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  border: 5px solid rgba(255, 255, 255, 0.2);
}
.fish .eyes::before {
  top: -15%;
}
.fish .eyes::after {
  bottom: -15%;
}
.fish [class|=link] {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 80px;
  height: 100px;
  background-color: var(--fColor);
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3)));
  background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.3) 30%, rgba(0, 0, 0, 0.3));
  border-radius: 100% 20% 20% 100%;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-animation: links 1.5s infinite alternate ease-in-out;
          animation: links 1.5s infinite alternate ease-in-out;
}
@-webkit-keyframes links {
  0% {
    -webkit-transform: translateY(-50%) rotate(var(--angle));
            transform: translateY(-50%) rotate(var(--angle));
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(calc(var(--angle) * -1));
            transform: translateY(-50%) rotate(calc(var(--angle) * -1));
  }
}
@keyframes links {
  0% {
    -webkit-transform: translateY(-50%) rotate(var(--angle));
            transform: translateY(-50%) rotate(var(--angle));
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(calc(var(--angle) * -1));
            transform: translateY(-50%) rotate(calc(var(--angle) * -1));
  }
}
.fish .link-1 {
  --angle: 2.5deg;
  height: 91px;
  -webkit-animation-delay: calc(-3.6s + var(--fishDelay));
          animation-delay: calc(-3.6s + var(--fishDelay));
}
.fish .link-2 {
  --angle: 5deg;
  height: 82px;
  -webkit-animation-delay: calc(-3.15s + var(--fishDelay));
          animation-delay: calc(-3.15s + var(--fishDelay));
}
.fish .link-3 {
  --angle: 7.5deg;
  height: 73px;
  -webkit-animation-delay: calc(-2.7s + var(--fishDelay));
          animation-delay: calc(-2.7s + var(--fishDelay));
}
.fish .link-4 {
  --angle: 10deg;
  height: 64px;
  -webkit-animation-delay: calc(-2.25s + var(--fishDelay));
          animation-delay: calc(-2.25s + var(--fishDelay));
}
.fish .link-5 {
  --angle: 12.5deg;
  height: 55px;
  -webkit-animation-delay: calc(-1.8s + var(--fishDelay));
          animation-delay: calc(-1.8s + var(--fishDelay));
}
.fish .link-6 {
  --angle: 15deg;
  height: 46px;
  -webkit-animation-delay: calc(-1.35s + var(--fishDelay));
          animation-delay: calc(-1.35s + var(--fishDelay));
}
.fish .link-7 {
  --angle: 17.5deg;
  height: 37px;
  -webkit-animation-delay: calc(-0.9s + var(--fishDelay));
          animation-delay: calc(-0.9s + var(--fishDelay));
}
.fish .link-8 {
  --angle: 20deg;
  height: 28px;
  -webkit-animation-delay: calc(-0.45s + var(--fishDelay));
          animation-delay: calc(-0.45s + var(--fishDelay));
}
.fish .tails {
  position: absolute;
  top: 50%;
  right: 80%;
  width: 60px;
  height: 120px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-animation: tails 1.5s -0.75s infinite alternate ease-in-out;
          animation: tails 1.5s -0.75s infinite alternate ease-in-out;
}
@-webkit-keyframes tails {
  0% {
    -webkit-transform: translateY(-50%) rotate(5deg);
            transform: translateY(-50%) rotate(5deg);
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(-5deg);
            transform: translateY(-50%) rotate(-5deg);
  }
}
@keyframes tails {
  0% {
    -webkit-transform: translateY(-50%) rotate(5deg);
            transform: translateY(-50%) rotate(5deg);
  }
  100% {
    -webkit-transform: translateY(-50%) rotate(-5deg);
            transform: translateY(-50%) rotate(-5deg);
  }
}
.fish .tail {
  position: absolute;
  right: 0%;
  width: 60px;
  height: 60px;
  background-color: var(--fColor);
  -webkit-transform-origin: right;
          transform-origin: right;
}
.fish .tail:nth-child(1) {
  bottom: 50%;
  border-radius: 0 30px 0 20px;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transform: skew(20deg);
          transform: skew(20deg);
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.1)));
  background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.3) 30%, rgba(0, 0, 0, 0.1));
}
.fish .tail:nth-child(2) {
  top: 50%;
  -webkit-transform: skew(-30deg);
          transform: skew(-30deg);
  border-radius: 20px 0 30px 0;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-transform: skew(-20deg);
          transform: skew(-20deg);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3)));
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.3) 30%, rgba(0, 0, 0, 0.3));
}
.fish .fin {
  position: absolute;
  right: 25%;
  width: 60px;
  height: 60px;
  background-color: var(--fColor);
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3)));
  background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.3) 30%, rgba(0, 0, 0, 0.3));
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-animation: fins 4.5s var(--fishDelay) infinite ease-in-out;
          animation: fins 4.5s var(--fishDelay) infinite ease-in-out;
}
.fish .fin:nth-child(1) {
  bottom: 100%;
  border-radius: 0 30px 0 20px;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  --skew: 30deg;
  --angle: 5deg;
}
.fish .fin:nth-child(2) {
  top: 100%;
  border-radius: 20px 0 30px 0;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  --skew: -30deg;
  --angle: -5deg;
}
@-webkit-keyframes fins {
  0%, 88%, 94%, 100% {
    -webkit-transform: skew(var(--skew)) rotate(var(--angle));
            transform: skew(var(--skew)) rotate(var(--angle));
  }
  91%, 97% {
    -webkit-transform: skew(var(--skew)) rotate(calc(var(--angle) * 5));
            transform: skew(var(--s.........完整代码请登录后点击上方下载按钮下载查看