svg+css实现一条水中游动呼吸的鱼儿动画效果代码-html代码-BFW代码库

svg+css实现一条水中游动呼吸的鱼儿动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现一条水中游动呼吸的鱼儿动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
:root {
  --dark: #002C9B;
  --light: #C8DFFF;
}

body {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  background: #0069FF;
}

.wrapper {
  animation: fish 1.5s ease infinite alternate;
  transform: translate(-4px, -2px);
}

@keyframes fish {
  from {
    transform: translate(-4px, -2px);
  }
  to {
    transform: translate(0px, 0px) rotate(1deg);
  }
}
.bod {
  color: var(--light);
  transform-origin: 0 50%;
  animation: bod 1.5s ease infinite alternate;
}

@keyframes bod {
  from {
    transform: translateX(0px) scalex(1);
  }
  to {
    transform: translateX(0.25px) scalex(0.98);
  }
}
.eye {
  color: var(--dark);
}

.fin-tail {
  color: var(--dark);
  transform-origin: 200px;
  animation: tail 1.5s 1.5s ease infinite alternate;
}

@keyframes tail {
  from {
    transform: scaleX(1) rotate(0deg);
  }
  to {
    transform: scaleX(0.75) rotate(3deg);
  }
}
.fin-back-bottom {
  color: var(--dark);
  transform-origin: 155px;
  animation: fin-bottom 1.5s ease infinite alternate;
}

.fin-front-bottom {
  color: var(--dark);
  transform-origin: 76px;
  animation: fin-bottom 1.5s ease infinite alternate;
}

@keyframes fin-bottom {
  from {
    transform: rotate(-4deg) scaleY(0.98);
  }
  to {
    transform: rotate(0deg) scaleY(1);
  }
}
.fin-front-top {
  color: var(--dark);
  transform-origin: 80px;
  animation: fin-front 1.5s ease infinite alternate;
}

@keyframes fin-front {
  from {
    transform: rotate(0deg) scaleX(1);
  }
  to {
    transform: rotate(-8deg) scaleX(0.55);
  }
}
.fin-dorsel {
  color: var(--dark);
  transform-origin: 80px;
  animation: fin-top 1.5s ease infinite alternate;
  transform: rotate(2deg) translate(2px, 3px);
}

.fin-back-top {
  color: var(--dark);
  transform-origin: 145px;
  animation: fin-top 1.5s ease infinite alternate;
}

@keyframes fin-top {
  from {
    transform: rotate(2deg) translate(2px, 3px);
  }
  to {
    transform: rotate(0deg) translate(0px, 0px);
  }
}
</style>


</head>

<body>
  <div class="wrapper">
<svg width="240" height="99" viewBox="0 0 240 99" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path class="fin-tail" d="M228.47 36.1471C230.769 31.1344 232.184 25.7614 232.651 20.266C232.702 19.7482 232.632 19.2257 232.448 18.7392C232.264 18.2528 231.969 17.8156 231.588 17.4619C231.206 17.1082 230.748 16.8475 230.249 16.7003C229.75 16.5531 229.224 16.5234 228.712 16.6133C218.014 18.5493 195.915 30.1123 189.397 48.6705C191.26 51.5175 193.582 54.0349 196.27 56.1196C208.208 67.9926 227.472 72.515 236.802 72.0007C237.312 71.9671 237.809 71.8185 238.254 71.566C238.699 71.3135 239.081 70.9636 239.372 70.5425C239.663 70.1214 239.855 69.64 239.933 69.1343C240.012 68.6286 239.975 68.1116 239.826 67.622C236.734 57.564 233.951 52.5501 230.836 49.7066C229.046 47.9958 227.85 45.7563 227.424 43.3162C226.998 40.876 227.365 38.3636 228.47 36.1471V36.1471Z" fill="currentColor"/>
  <path class="fin-back-bottom" d="M178.495 60.1602C173.483 62.4289 165.242 65.7942 155.391 69.1065C156.409 70.2731 157.28 71.5609 157.984 72.9407C158.243 73.479 158.655 73.9285 159.169 74.2327C159.683 74.5369 160.276 74.682 160.872 74.6498C167.868 74.1668 174.896 74.5248 181.807 75.7161C182.434 75.8351 183.082 75.753 183.659 75.4813C184.236 75.2097 184.712 74.7624 185.02 74.2036L186.971 70.6115C187.188 70.2134 187.313 69.7716 187.337 69.3187C187.36 68.8658 187.282 68.4133 187.107 67.9948L184.839 62.5423C184.635 62.0552 184.307 61.63 183.888 61.3089C183.469 60.9879 182.973 6.........完整代码请登录后点击上方下载按钮下载查看