css svg独角鲸

• HTML代码

<div id="bgContainer">
  <div id="background"></div>
</div>
<svg id="narwhal" width="211" height="204" version="1.1" viewBox="0 0 211.03 204.22" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(7.1125 -5.1801)">
    <path d="m77.215 83.558c1.4405-0.60569 2.2867-2.2553 1.9155-3.7342-0.6446-2.5683-3.8498-3.4357-5.7338-1.5517-2.6146 2.6146 0.36421 6.7382 3.8183 5.2859zm-41.591 0.32282c1.2292-0.19662 2.5542-1.9723 2.5542-3.4231 0-1.6496-1.6219-3.1891-3.3422-3.1725-1.6666 0.01609-2.6435 0.72969-3.2054 2.3417-0.82222 2.3586 1.3535 4.6762 3.9935 4.254z" fill="#646565" stroke-width=".40736" />

    <g transform="rotate(-7.7226 -43.169 -86.721)" stroke-width=".40736" id="wavyFin">
      <g id="point"></g>
      <path d="m-32.219 158.99c17.782-3.4586 22.953-8.605 30.452-14.663 19.075-22.07 8.1615-11.969 1.0529-30.258-7.5572 5.1319-14.075 8.7611-19.344 14.504-6.1573 6.711-11.951 16.106-13.941 22.604-0.84424 2.7577-1.7072 7.596-1.3905 7.7963 0.12956 0.0819 1.5562 0.0895 3.1704 0.0168z" fill="#51c9cc" />
      <path d="m9.0792 131.3c-11.266-7.8558-10.668-10.718-15.603-6.6943-5.7205 4.9496-13.655 10.976-17.506 32.372 14.324-3.115 25.071-12.809 33.109-25.677z" fill="#3cabab" />
    </g>
    <g stroke-width=".40736">
      <path d="m147.72 174.63c-15.966-22.909-58.78-43.53-95.861-47.218 0 0-4.2286 3.0102-23.261 9.8931-2.8252 9.8267-4.4778 17.924 1.5561 26.202 12.339 20.743 30.507 32.945 54.003 39.404 30.542 6.7475 60.809-3.6828 63.563-28.281z" fill="#ebe8e3" />
      <path d="m121.8 209.15c18.64-1.9313 32.041-7.9477 42.807-19.217 13.687-14.328 17.776-30.369 18.819-58.773-2.1262-20.645-19.555 30.433-35.705 43.468l-1.714 1.4874c-12.247 10.628-28.319 16.037-47.63 16.03-15.341-6e-3 -31.019-3.0079-49.291-9.4393l-4.6847-1.6489 2.6572 2.5608c13.542 13.05 32.434 22.066 52.337 24.977 5.1151 0.74813 17.566 1.0567 22.405 0.55531z" fill="#d2d0cc" />
      <path d="m27.225 157c-0.10138-3.132 1.0156-6.9296 3.0212-10.271 4.2148-7.0228 11.797-11.322 23.819-13.504 5.6029-1.017 16.997-1.0162 21.387 2e-3 3.4971 0.8108 9.4187 2.9425 9.7749 3.5188 0.11932 0.19308 0.66337 2.1109 1.209 4.2618 2.133 8.4085 6.9758 16.359 14.669 24.083 4.1929 4.2095 10.027 9.1187 10.852 9.1316 0.38255 6e-3 2.3118-7.1496 2.8545-10.588 0.26528-1.6804 0.53846-3.124 0.60708-3.2081 0.0686-0.0841 1.4232 0.8097 3.0102 1.9862 6.2798 4.6554 12.586 8.0157 18.583 9.9029 9.8588 3.102 21.833 3.1044 33.503 7e-3 -16.032-18.666-28.397-7.6412-47.229-58.591-3.2866-7.8704-5.2768-15.5-7.0718-27.11-1.8932-12.245-2.6953-15.256-5.5744-20.926-6.0659-11.945-17.821-20.854-31.318-23.735-4.2924-0.91631-15.675-1.0269-19.146-0.18609-3.6088 0.87419-6.5178 1.8152-6.5178 2.1084-7.8081 3.8859-11.664 7.7692-17.268 11.504-0.73679 0.23088-4.5953 5.5047-7.0712 9.6649-4.143 6.9614-8.0859 16.76-10.245 25.46-1.2781 5.1504-2.0262 10.11-2.5193 16.702-0.02123 27.334 4.8844 34.677 10.67 49.786z" fill="#51c9cc" />
      <path d="m159.78 174.21c3.585-0.39273 10.014-1.7382 14.244-2.9811l3.2449-0.95343 1.3417-3.4225c3.9829-10.16 6.7923-24.56 7.2643-37.234 0.1168-3.1367 0.31192-6.8534 0.4336-8.2592l0.22122-2.5561c-13.272-2.0557-13.046-1.9342-22.472 0.55054 0 0.85638-4.4756 7.8656-6.8987 10.804-1.713 2.0773-6.0718 5.3995-8.3775 6.3853-0.96429 0.41227-2.7251 0.70382-4.3135 0.7142-6.2876 0.0411-11.338-4.3527-17.326-15.073-1.2202-2.1844-2.1218-3.5134-2.0037-2.9533 0.11817 0.56012 0.60034 2.8412 1.0715 5.069 2.758 13.041 9.9852 25.459 18.623 31.998 2.6291 1.9903 9.4579 5.708 11.418 6.2162 0.94408 0.24473 0.93791 0.26659-0.79694 2.8217-0.96162 1.4163-3.0938 4.0874-4.7381 5.9358l-2.9897 3.3608 4.6014-0.0553c2.5308-0.0304 5.8846-0.19588 7.453-0.36769z" fill="#3cabab" />
    </g>
    <path d="m53.989 43.352-30.989-38.172 13.146 49.775c2.2505 11.895 11.571 14.82 18.292 10.534 11.23-8.3835 4.4778-15.983-0.44904-22.138z" fill="#e4c0e3" />
    <path d="m77.215 83.558c2.4423-2.0551 1.0277-6.0335-2.1453-6.0335-3.7508 0-4.9367 4.8468-1.6183 6.6142 1.3696 0.72943 2.3946 0.57127 3.7636-0.58072zm-41.461 0.43689c2.2616-1.2286 2.2019-4.9348-0.0987-6.1245-3.6762-1.901-6.9907 2.6256-4.0649 5.5515 1.3048 1.3048 2.511 1.4708 4.1636 0.57303z" fill="#194848" stroke-width=".40736" />
    <g fill="#3cabab" stroke-width=".40736">
      <path d="m173.9 104.25c-0.8293-7.33-4.929-15.109-11.788-22.368-3.0059-3.1812-11.072-9.8734-11.901-9.8734-0.51892 0-1.5495 3.5982-2.2638 7.9037-0.64431 3.8838-0.24052 11.88 0.79763 15.795 2.0181 7.6106 5.4099 13.434 11.342 19.474 2.0863 2.124 3.7932 4.0161 3.7932 4.2048 18.218 17.136 10.686-9.3106 10.02-15.135z" id="leftFin"></path>
      <path d="m186.53 118.8 2.1052-1.0585c4.8261-2.4266 8.1976-5.3425 10.885-9.4137 4.6438-7.036 5.6052-15.666 2.9075-26.097-0.6559-2.536-1.387-4.8055-1.6248-5.0432-0.30476-0.30476-1.2517 0.01462-3.2104 1.0828-9.8039 5.3464-17.629 14.782-22.811 27.508-1.8294 8.1482-0.95851 4.9072-4.1135 13.979 5.9294 2.1947 15.862-0.9573 15.862-0.9573z" id="rightFin" />
      <path d="m121.74 162.33c-9e-3 -6.5028-2.7543-15.091-7.1822-22.47-1.8017-3.0026-3.2965-4.9969-2.8078-3.7463 2.586 6.6187 3.5041 11.439 3.5306 18.535l0.0205 5.4994 2.6186 1.9511c3.7802 2.8166 3.824 2.8192 3.8204 0.23117z" />
    </g>
    <g transform="matrix(.93575 -.024637 .024637 .93575 -1563.8 -2547.1)">
      <path d="m1631.5 2867.7c1.052 9.3458 8.3323 14.376 21.516 14.756 0-2e-4 0.01 0 0.016 0 0.01 2e-4 0.01 0 0.016 0 0.1521 0 0.2896-0.014 0.4375-0.021 0.1472 0.01 0.2841 0.021 0.4356 0.021 0.01 0 0.01 2e-4 0.016 0 0.01 0 0.016-2e-4 0.016 0 13.183-0.3804 20.464-5.4101 21.516-14.756-7.475 2.6408-14.485 4.191-21.531 4.3477-0.1387 0-0.2774-0.011-0.4161-0.02-0.012 8e-4 -0.023 0-0.035 0-0.012-8e-4 -0.025 0-0.037 0-0.1386 0.01-0.2774 0.016-0.416 0.02-7.0466-0.1567-14.056-1.7069-21.531-4.3477z" fill="#6d0000" stroke="#be0000" />
      <path d="m1647.4 2876.2a8.5079 5.0064 0 0 0-7.8301 3.0606c3.4202 1.7496 7.8746 2.7262 13.369 2.8848 0-2e-4 0.01 0 0.016 0 0.01 2e-4 0.01 0 0.016 0 0.1521 0 0.2896-0.015 0.4375-0.022 0.1472 0.01 0.284 0.022 0.4355 0.022 0.01 0 0.012 2e-4 0.018 0 0.01 0 0.016-2e-4 0.016 0 4.839-0.1397 8.8751-0.9112 12.107-2.2872a8.5079 5.0064 0 0 0-8.1855-3.6582 8.5079 5.0064 0 0 0-5.2051 1.0489 8.5079 5.0064 0 0 0-5.1934-1.0489z" fill="#a80000" />
      <path d="m1646 2877.2c-6.1847 0.3889 1.3627 1.6532 3.4649 1.7519 3.8155 0.3579 9.093 0.1126 11.721-1.0488-4.8302-1.982-9.3338 1.4165-14.031-0.7187l-0.3769-0.01-0.7774 0.024z" fill="#d30000" />
      <g transform="matrix(.99553 -.094459 .094459 .99553 -255.03 180.94)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.99964 .026851 .026851 .99964 3229.4 -30.907)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.77397 -.1033 .1033 .77397 88.854 828.81)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.76365 -.16291 .16291 .76365 -61.873 956.26)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.74833 -.22297 .22297 .74833 -205.53 1098.5)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.58527 -.17797 .17797 .58527 194.86 1489.8)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.56974 -.22276 .22276 .56974 94.485 1607.5)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.99447 -.10505 -.10505 .99447 3591.1 201.42)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(.9993 .037484 -.037484 .9993 109.08 -47.484)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.77612 -.085709 -.085709 .77612 3171.8 793.55)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.76715 -.14555 -.14555 .76715 3325.4 917.55)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.75319 -.20593 -.20593 .75319 3472.2 1056.5)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.58916 -.16465 -.16465 .58916 3080.8 1456.8)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
      <g transform="matrix(-.57464 -.20977 -.20977 .57464 3183.8 1572.1)">
        <path d="m1649.5 2860h3.7979c-0.3757 3.0216-3.4386 2.9555-3.7979 0z" fill="#e0dac2" />
        <path d="m1649.9 2860h2.9693c-0.2937 3.0216-2.6884 2.9555-2.9693 0z" fill="#f0ede1" />
        <path d="m1650.4 2860h1.9335c-0.1912 2.0907-1.7506 2.045-1.9335 0z" fill="#fff" />
      </g>
    </g>
    <g fill="#fdffc2" stroke="gray" stroke-width=".2">
      <path id="star1" d="m36.77 46.872-4.0824-3.4429-4.3026 3.1634 3.4429-4.0824-3.1634-4.3026 4.0824 3.4429 4.3026-3.1634-3.4429 4.0824z" />
      <path id="star2" d="m38.654 23.708-4.0824-3.4429-4.3026 3.1634 3.4429-4.0824-3.1634-4.3026 4.0824 3.4429 4.3026-3.1634-3.4429 4.0824z" />
    </g>
  </g>
</svg>

• CSS代码

#bgContainer {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#background {
  height: 100%;
  width: 100%;
  background: radial-gradient(
    circle,
    rgba(238, 182, 71, 0.5) 1%,
    rgba(230, 88, 59, 0.5) 13%,
    rgba(239, 78, 123, 0.5) 26%,
    rgba(175, 104, 187, 0.5) 39%,
    rgba(65, 131, 203, 0.5) 52%,
    rgba(18, 157, 179, 0.5) 65%,
    rgba(7, 179, 155, 0.5) 77%,
    rgba(111, 186, 130, 0.5) 89%,
    rgba(172, 191, 85, 0.5) 98%
  );
  z-index: -1;
  animation: 1s backgroundWarp infinite;
}

@keyframes backgroundWarp {
  50% {
    transform: scale(5);
  }
}

#narwhal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50vh;
  width: 50vw;
}

#wavyFin {
  animation: 2s wavyFin infinite ease-in-out;
  transform-origin: 50px 100px;
}

#leftFin {
  animation: 1s leftFin infinite ease-in-out;
  transform-origin: 160px 120px;
}

#rightFin {
  animation: 1s rightFin infinite ease-in-out;
  transform-origin: 180px 120px;
}

@keyframes wavyFin {
  0%,
  100% {
    transform: rotate(0deg) translate(50px);
  }
  50% {
    transform: rotate(60deg) translate(70px);
  }
}
@keyframes leftFin {
  0%,
  100% {
    transform: rotate(-10deg) translatey(10px);
  }
  50% {
    transform: rotate(10deg) translatey(10px);
  }
}
@keyframes rightFin {
  0%,
  100% {
    transform: rotate(0deg) translatey(10px);
  }
  50% {
    transform: rotate(-20deg) translatey(10px);
  }
}

#star1 {
  animation: 1500ms rotateStar infinite linear;
  transform-origin: 33px 42px;
}

#star2 {
  opacity: 0;
  animation: 1500ms rotateStar infinite alternate;
  animation-delay: 1s;
  transform-origin: 35px 20px;
}

@keyframes rotateStar {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  40%,
  60% {
    opacity: 1;
  }
  50% {
    transform: rotate(360deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(720deg) scale(0);
  }
}