CSS多边形鱼

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #1E5799;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 600px;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.camera {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.camera.-x {
  transform: rotateX(-30deg);
}
.camera.-y {
  trannsform: rotateY(0deg);
}
.under-sea {
  transform: scale3d(0.4, 0.4, 0.4);
}

.blowing-bubbles .bubble:nth-child(1) {
  left: -21px;
  width: 29px;
  height: 29px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6797ms -4299ms linear infinite;
          animation: bubbles 6797ms -4299ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(2) {
  left: -35px;
  width: 29px;
  height: 29px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4815ms -8389ms linear infinite;
          animation: bubbles 4815ms -8389ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(3) {
  left: -30px;
  width: 29px;
  height: 29px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3609ms -9779ms linear infinite;
          animation: bubbles 3609ms -9779ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(4) {
  left: 8px;
  width: 17px;
  height: 17px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5087ms -5490ms linear infinite;
          animation: bubbles 5087ms -5490ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(5) {
  left: -39px;
  width: 24px;
  height: 24px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4838ms -3036ms linear infinite;
          animation: bubbles 4838ms -3036ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(6) {
  left: -35px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3433ms -319ms linear infinite;
          animation: bubbles 3433ms -319ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(7) {
  left: -25px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3409ms -6834ms linear infinite;
          animation: bubbles 3409ms -6834ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(8) {
  left: -10px;
  width: 26px;
  height: 26px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3545ms -3093ms linear infinite;
          animation: bubbles 3545ms -3093ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(9) {
  left: 16px;
  width: 30px;
  height: 30px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3122ms -6590ms linear infinite;
          animation: bubbles 3122ms -6590ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(10) {
  left: -11px;
  width: 26px;
  height: 26px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5412ms -7506ms linear infinite;
          animation: bubbles 5412ms -7506ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(11) {
  left: 22px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3107ms -8171ms linear infinite;
          animation: bubbles 3107ms -8171ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(12) {
  left: -37px;
  width: 18px;
  height: 18px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3211ms -992ms linear infinite;
          animation: bubbles 3211ms -992ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(13) {
  left: -10px;
  width: 26px;
  height: 26px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4736ms -6068ms linear infinite;
          animation: bubbles 4736ms -6068ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(14) {
  left: -27px;
  width: 22px;
  height: 22px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6135ms -432ms linear infinite;
          animation: bubbles 6135ms -432ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(15) {
  left: 14px;
  width: 13px;
  height: 13px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3404ms -2040ms linear infinite;
          animation: bubbles 3404ms -2040ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(16) {
  left: 37px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4505ms -6404ms linear infinite;
          animation: bubbles 4505ms -6404ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(17) {
  left: -5px;
  width: 17px;
  height: 17px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4354ms -5573ms linear infinite;
          animation: bubbles 4354ms -5573ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(18) {
  left: -21px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5113ms -6859ms linear infinite;
          animation: bubbles 5113ms -6859ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(19) {
  left: 25px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4978ms -1051ms linear infinite;
          animation: bubbles 4978ms -1051ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(20) {
  left: 37px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5247ms -1184ms linear infinite;
          animation: bubbles 5247ms -1184ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(21) {
  left: -3px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5180ms -3689ms linear infinite;
          animation: bubbles 5180ms -3689ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(22) {
  left: -21px;
  width: 25px;
  height: 25px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4908ms -9234ms linear infinite;
          animation: bubbles 4908ms -9234ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(23) {
  left: 25px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6678ms -7688ms linear infinite;
          animation: bubbles 6678ms -7688ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(24) {
  left: 17px;
  width: 19px;
  height: 19px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5230ms -7507ms linear infinite;
          animation: bubbles 5230ms -7507ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(25) {
  left: -23px;
  width: 30px;
  height: 30px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6308ms -471ms linear infinite;
          animation: bubbles 6308ms -471ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(26) {
  left: 11px;
  width: 25px;
  height: 25px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3214ms -40ms linear infinite;
          animation: bubbles 3214ms -40ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(27) {
  left: -10px;
  width: 11px;
  height: 11px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4585ms -284ms linear infinite;
          animation: bubbles 4585ms -284ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(28) {
  left: 10px;
  width: 21px;
  height: 21px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4603ms -8294ms linear infinite;
          animation: bubbles 4603ms -8294ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(29) {
  left: 2px;
  width: 26px;
  height: 26px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4065ms -1483ms linear infinite;
          animation: bubbles 4065ms -1483ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(30) {
  left: -33px;
  width: 23px;
  height: 23px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4977ms -2044ms linear infinite;
          animation: bubbles 4977ms -2044ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(31) {
  left: 17px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3463ms -288ms linear infinite;
          animation: bubbles 3463ms -288ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(32) {
  left: -6px;
  width: 14px;
  height: 14px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6123ms -3704ms linear infinite;
          animation: bubbles 6123ms -3704ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(33) {
  left: -33px;
  width: 13px;
  height: 13px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6971ms -6669ms linear infinite;
          animation: bubbles 6971ms -6669ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(34) {
  left: -7px;
  width: 17px;
  height: 17px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4847ms -5776ms linear infinite;
          animation: bubbles 4847ms -5776ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(35) {
  left: -32px;
  width: 17px;
  height: 17px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6354ms -8920ms linear infinite;
          animation: bubbles 6354ms -8920ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(36) {
  left: -22px;
  width: 21px;
  height: 21px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6908ms -7314ms linear infinite;
          animation: bubbles 6908ms -7314ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(37) {
  left: -11px;
  width: 27px;
  height: 27px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 4843ms -4580ms linear infinite;
          animation: bubbles 4843ms -4580ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(38) {
  left: -4px;
  width: 24px;
  height: 24px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 6899ms -5500ms linear infinite;
          animation: bubbles 6899ms -5500ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(39) {
  left: 2px;
  width: 19px;
  height: 19px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 3070ms -3049ms linear infinite;
          animation: bubbles 3070ms -3049ms linear infinite;
}
.blowing-bubbles .bubble:nth-child(40) {
  left: -34px;
  width: 19px;
  height: 19px;
  border-top: 1px solid #AFD2F7;
  border-radius: 100%;
  -webkit-animation: bubbles 5690ms -9883ms linear infinite;
          animation: bubbles 5690ms -9883ms linear infinite;
}

@-webkit-keyframes bubbles {
  0% {
    transform: translateY(400px);
  }
  100% {
    transform: translateY(-1000px);
  }
}

@keyframes bubbles {
  0% {
    transform: translateY(400px);
  }
  100% {
    transform: translateY(-1000px);
  }
}
.fish-body .scale {
  position: static;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 100px;
  -webkit-animation: fishColor 1000ms linear infinite alternate;
          animation: fishColor 1000ms linear infinite alternate;
}
.fish-body .scale.-top.-front {
  transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(1.5px, 2.5px);
}
.fish-body .scale.-top.-back {
  transform: scale(-1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(1.5px, 2.5px);
}
.fish-body .scale.-bottom.-front {
  transform: scale(1, -1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(1.5px, 2.5px);
}
.fish-body .scale.-bottom.-back {
  transform: scale(-1, -1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg) translate(1.5px, 2.5px);
}
.fish-body > .half {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 100px;
}
.fish-body > .half.-left {
  transform: translateZ(-1px);
}
.fish-body > .half.-left .scale.-top.-front {
  -webkit-animation-delay: -200ms;
          animation-delay: -200ms;
}
.fish-body > .half.-left .scale.-top.-back {
  -webkit-animation-delay: -400ms;
          animation-delay: -400ms;
}
.fish-body > .half.-left .scale.-bottom.-front {
  -webkit-animation-delay: -600ms;
          animation-delay: -600ms;
}
.fish-body > .half.-left .scale.-bottom.-back {
  -webkit-animation-delay: -800ms;
          animation-delay: -800ms;
}
.fish-body > .half.-right {
  transform: scaleZ(-1) translateZ(-1px);
}
.fish-body > .half.-right .scale.-top.-front {
  -webkit-animation-delay: -1000ms;
          animation-delay: -1000ms;
}
.fish-body > .half.-right .scale.-top.-back {
  -webkit-animation-delay: -1200ms;
          animation-delay: -1200ms;
}
.fish-body > .half.-right .scale.-bottom.-front {
  -webkit-animation-delay: -1400ms;
          animation-delay: -1400ms;
}
.fish-body > .half.-right .scale.-bottom.-back {
  -webkit-animation-delay: -1600ms;
          animation-delay: -1600ms;
}

.fish-tail {
  top: 10px;
  left: -30px;
  transform-origin: 100% 50%;
  -webkit-animation: fishMotion 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: fishMotion 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.fish-tail > .scale {
  position: static;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 40px 30px;
  -webkit-animation: fishColor 1000ms linear infinite alternate;
          animation: fishColor 1000ms linear infinite alternate;
}
.fish-tail > .scale.-top {
  transform: scale(-1, 1);
}
.fish-tail > .scale.-bottom {
  transform: scale(-1, -1);
  -webkit-animation-delay: -200ms;
          animation-delay: -200ms;
}

.swiming-fishes .rotate {
  width: 400px;
  transform-origin: 0 0;
  -webkit-animation: rotateY 10000ms linear infinite;
          animation: rotateY 10000ms linear infinite;
}
.swiming-fishes .swim:nth-child(1) .rotate {
  width: 688px;
  -webkit-animation-delay: -1309ms;
          animation-delay: -1309ms;
  -webkit-animation-duration: 10205ms;
          animation-duration: 10205ms;
}
.swiming-fishes .swim:nth-child(1) .depth {
  transform: translateY(-85px);
}
.swiming-fishes .swim:nth-child(1) .shadow {
  transform: translate(-50px, 285px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(1) .fish {
  -webkit-animation-delay: -1252ms;
          animation-delay: -1252ms;
}
.swiming-fishes .swim:nth-child(1) .fish-tail {
  -webkit-animation-delay: -952ms;
          animation-delay: -952ms;
}
.swiming-fishes .swim:nth-child(2) .rotate {
  width: 320px;
  -webkit-animation-delay: -7068ms;
          animation-delay: -7068ms;
  -webkit-animation-duration: 12735ms;
          animation-duration: 12735ms;
}
.swiming-fishes .swim:nth-child(2) .depth {
  transform: translateY(-615px);
}
.swiming-fishes .swim:nth-child(2) .shadow {
  transform: translate(-50px, 815px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(2) .fish {
  -webkit-animation-delay: -2187ms;
          animation-delay: -2187ms;
}
.swiming-fishes .swim:nth-child(2) .fish-tail {
  -webkit-animation-delay: -1887ms;
          animation-delay: -1887ms;
}
.swiming-fishes .swim:nth-child(3) .rotate {
  width: 735px;
  -webkit-animation-delay: -6856ms;
          animation-delay: -6856ms;
  -webkit-animation-duration: 10511ms;
          animation-duration: 10511ms;
}
.swiming-fishes .swim:nth-child(3) .depth {
  transform: translateY(-610px);
}
.swiming-fishes .swim:nth-child(3) .shadow {
  transform: translate(-50px, 810px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(3) .fish {
  -webkit-animation-delay: -379ms;
          animation-delay: -379ms;
}
.swiming-fishes .swim:nth-child(3) .fish-tail {
  -webkit-animation-delay: -79ms;
          animation-delay: -79ms;
}
.swiming-fishes .swim:nth-child(4) .rotate {
  width: 363px;
  -webkit-animation-delay: -3756ms;
          animation-delay: -3756ms;
  -webkit-animation-duration: 10363ms;
          animation-duration: 10363ms;
}
.swiming-fishes .swim:nth-child(4) .depth {
  transform: translateY(-693px);
}
.swiming-fishes .swim:nth-child(4) .shadow {
  transform: translate(-50px, 893px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(4) .fish {
  -webkit-animation-delay: -1125ms;
          animation-delay: -1125ms;
}
.swiming-fishes .swim:nth-child(4) .fish-tail {
  -webkit-animation-delay: -825ms;
          animation-delay: -825ms;
}
.swiming-fishes .swim:nth-child(5) .rotate {
  width: 363px;
  -webkit-animation-delay: -7471ms;
          animation-delay: -7471ms;
  -webkit-animation-duration: 8428ms;
          animation-duration: 8428ms;
}
.swiming-fishes .swim:nth-child(5) .depth {
  transform: translateY(-193px);
}
.swiming-fishes .swim:nth-child(5) .shadow {
  transform: translate(-50px, 393px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(5) .fish {
  -webkit-animation-delay: -1530ms;
          animation-delay: -1530ms;
}
.swiming-fishes .swim:nth-child(5) .fish-tail {
  -webkit-animation-delay: -1230ms;
          animation-delay: -1230ms;
}
.swiming-fishes .swim:nth-child(6) .rotate {
  width: 518px;
  -webkit-animation-delay: -563ms;
          animation-delay: -563ms;
  -webkit-animation-duration: 9997ms;
          animation-duration: 9997ms;
}
.swiming-fishes .swim:nth-child(6) .depth {
  transform: translateY(-128px);
}
.swiming-fishes .swim:nth-child(6) .shadow {
  transform: translate(-50px, 328px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(6) .fish {
  -webkit-animation-delay: -1262ms;
          animation-delay: -1262ms;
}
.swiming-fishes .swim:nth-child(6) .fish-tail {
  -webkit-animation-delay: -962ms;
          animation-delay: -962ms;
}
.swiming-fishes .swim:nth-child(7) .rotate {
  width: 631px;
  -webkit-animation-delay: -8044ms;
          animation-delay: -8044ms;
  -webkit-animation-duration: 10497ms;
          animation-duration: 10497ms;
}
.swiming-fishes .swim:nth-child(7) .depth {
  transform: translateY(-416px);
}
.swiming-fishes .swim:nth-child(7) .shadow {
  transform: translate(-50px, 616px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(7) .fish {
  -webkit-animation-delay: -1256ms;
          animation-delay: -1256ms;
}
.swiming-fishes .swim:nth-child(7) .fish-tail {
  -webkit-animation-delay: -956ms;
          animation-delay: -956ms;
}
.swiming-fishes .swim:nth-child(8) .rotate {
  width: 682px;
  -webkit-animation-delay: -4441ms;
          animation-delay: -4441ms;
  -webkit-animation-duration: 13463ms;
          animation-duration: 13463ms;
}
.swiming-fishes .swim:nth-child(8) .depth {
  transform: translateY(-534px);
}
.swiming-fishes .swim:nth-child(8) .shadow {
  transform: translate(-50px, 734px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(8) .fish {
  -webkit-animation-delay: -755ms;
          animation-delay: -755ms;
}
.swiming-fishes .swim:nth-child(8) .fish-tail {
  -webkit-animation-delay: -455ms;
          animation-delay: -455ms;
}
.swiming-fishes .swim:nth-child(9) .rotate {
  width: 295px;
  -webkit-animation-delay: -809ms;
          animation-delay: -809ms;
  -webkit-animation-duration: 8563ms;
          animation-duration: 8563ms;
}
.swiming-fishes .swim:nth-child(9) .depth {
  transform: translateY(-359px);
}
.swiming-fishes .swim:nth-child(9) .shadow {
  transform: translate(-50px, 559px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(9) .fish {
  -webkit-animation-delay: -1620ms;
          animation-delay: -1620ms;
}
.swiming-fishes .swim:nth-child(9) .fish-tail {
  -webkit-animation-delay: -1320ms;
          animation-delay: -1320ms;
}
.swiming-fishes .swim:nth-child(10) .rotate {
  width: 753px;
  -webkit-animation-delay: -6601ms;
          animation-delay: -6601ms;
  -webkit-animation-duration: 10777ms;
          animation-duration: 10777ms;
}
.swiming-fishes .swim:nth-child(10) .depth {
  transform: translateY(-222px);
}
.swiming-fishes .swim:nth-child(10) .shadow {
  transform: translate(-50px, 422px) rotateX(90deg);
}
.swiming-fishes .swim:nth-child(10) .fish {
  -webkit-animation-delay: -1605ms;
          animation-delay: -1605ms;
}
.swiming-fishes .swim:nth-child(10) .fish-tail {
  -webkit-animation-delay: -1305ms;
          animation-delay: -1305ms;
}

.fish-component {
  top: -50px;
  right: 0;
  transform: rotateY(90deg) translateX(-100px);
}
.fish-component .fish {
  transform-origin: 100px 50px;
  -webkit-animation: fishMotion 500ms -200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: fishMotion 500ms -200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.fish-component .shadow {
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(25, 44, 84, 0.2) 10%, rgba(14, 71, 145, 0) 50%);
}

@-webkit-keyframes rotateX {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}

@keyframes rotateX {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}
@-webkit-keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes rotateZ {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes rotateZ {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes fishColor {
  0% {
    border-color: transparent transparent #6C99C6 transparent;
  }
  100% {
    border-color: transparent transparent #1A5AB6 transparent;
  }
}
@keyframes fishColor {
  0% {
    border-color: transparent transparent #6C99C6 transparent;
  }
  100% {
    border-color: transparent transparent #1A5AB6 transparent;
  }
}
@-webkit-keyframes fishMotion {
  0% {
    transform: rotateY(20deg);
  }
  100% {
    transform: rotateY(-20deg);
  }
}
@keyframes fishMotion {
  0% {
    transform: rotateY(20deg);
  }
  100% {
    transform: rotateY(-20deg);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg