svg+js实现可爱仙人掌动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+js实现可爱仙人掌动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
svg {
  width: 100vw;
  height: 100vh;
  background: #fcf2e6;
}

body {
  margin: 0;
  overflow: hidden;
  background: #fcf2e6;
}

.a {
  fill: none;
}

.b {
  isolation: isolate;
}

.c {
  fill: #fcf2e6;
}

.ax,
.ay,
.az,
.bb,
.d,
.y {
  fill: #7da72b;
}

.e {
  fill: #e25c99;
}

.f {
  fill: #edcfb2;
}

.g {
  fill: #55822e;
}

.h,
.s {
  fill: #57752a;
}

.i {
  fill: #97b54d;
}

.j {
  fill: #a6154a;
}

.k {
  fill: #e8dc76;
}

.l {
  fill: #1a2617;
}

.m {
  fill: #333a1d;
}

.n,
.p {
  fill: #bdb6ac;
}

.o {
  fill: #8b8175;
}

.ab,
.aw,
.ax,
.ay,
.ba,
.p,
.s,
.y {
  mix-blend-mode: multiply;
}

.aw,
.q {
  fill: #a1ba4e;
}

.av,
.ba,
.r {
  fill: #6a852b;
}

.s {
  opacity: 0.61;
}

.t {
  fill: #6a7b35;
}

.u {
  fill: #88a127;
}

.v {
  fill: #bdd165;
}

.w {
  fill: #010101;
}

.x {
  fill: #111610;
}

.y {
  opacity: 0.54;
}

.z {
  fill: #90b723;
}

.aa,
.ab {
  fill: #d88e42;
}

.ac {
  fill: #deb288;
}

.ad {
  fill: #583a1c;
}

.ae {
  fill: #2c1b10;
}

.af {
  fill: #668830;
}

.ag {
  fill: #e9a2c2;
}

.ah {
  fill: #a5426f;
}

.ai {
  fill: #f1f5dc;
}

.aj {
  fill: #36130d;
}

.ak {
  fill: #ba5523;
}

.al {
  fill: #576f28;
}

.am {
  fill: #345729;
  opacity: 0.64;
}

.an {
  fill: #559432;
  opacity: 0.81;
}

.ao {
  fill: #df1e32;
}

.ap {
  fill: #9f1a27;
}

.aq {
  fill: #fecf07;
}

.ar {
  clip-path: url(#a);
}

.as {
  clip-path: url(#b);
}

.at {
  clip-path: url(#c);
}

.au {
  clip-path: url(#d);
}

.av {
  opacity: 0.51;
}

.ay {
  opacity: 0.71;
}

.az {
  opacity: 0.5;
}

.bb {
  opacity: 0.55;
}

.shrinkingCactus {
  transform-origin: center 80%;
  transform-box: fill-box;
}

.shrinkingCactus .spines * {
  transform-origin: 489px 453px;
}

.spinningEye,
.wow,
.wowEye,
.rotatingFlower,
.hidingCactusLeft {
  transform-origin: center;
  transform-box: fill-box;
}

.wowEye {
  transform-origin: center bottom;
}

.pickle {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.pickle5 {
  transform-origin: right bottom;
}

.pickle7 {
  transform-origin: left bottom;
}

.letter path {
  transform-box: fill-box;
  transform-origin: center;
}

.letter {
  offset-rotate: 0deg;
  opacity: 0;
}

.letter-h {
  offset-path: path("M0,0C-31,5-113.69-27.46-113.69,51.54S-20.33,165.77-65,264.15-305.69,442.54-276.69,514.54s52,103,52,103");
}

.letter-a {
  offset-path: path("M0,0S185,114.11,167,190.11s-231,140-221,220,228,219,332,154,56-219,32-204");
}

.letter-v {
  offset-path: path("M0,0S-221.81-102.89-298.81-53.89-488,51.29-339.41,154.2s497.6-72.09,596.6,41.91-338,393-396,366");
}

.letter-e {
  offset-path: path("M0,0S312.29-98.31,292.29-5.31s-549,156-488,282,493,318,555,292-44-182-136-192S69.68,404.93,66,446.81");
}

.letter-f {
  offset-path: path("M0,0S306.93,61.15,315.93,114.15s-471,216-478,171-307-45-304-5,213,268,242,261");
}

.letter-u {
  offset-path: path("M0,0S-634.38-198.7-449.38,71.3s648,99,710,152-200,373-262,341");
}

.letter-n {
  offset-path: path("M0,0S-655,138.36-593,246.36s338,284,343,214-74-174-137-122");
}

.letter-exc {
  offset-path: path("M0,0S164.92-69.87,189.92,45.13s91,509,21,519-377-199-343-221");
}
</style>


</head>

<body translate="no" >
  <!-- Cacti from https://www.freepik.com/free-vector/enjoyable-cacti-set_853959.htm -->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 700">
  <clipPath id="a">
    <path class="a" d="M45,582.9c3.23,11.48,15.66,75.71,21.47,84s49.9,14.91,69.92,14.91,59.16-3.42,65.71-10.6,25.68-88.27,25.68-88.27Z"/>
  </clipPath>
  <clipPath id="b">
    <path class="a" d="M251.87,534.18c0-11.2-60.69-20.64-106.64-21.64-41.79-.9-105,8.4-115.95,18.62a3.56,3.56,0,0,0-1.42,1.91,2.94,2.94,0,0,0-.23,1.11c-.62,7.31,3.69,52.59,9.55,60.6s52.56,19.1,102.83,19.1c49.05,0,83.52-12.6,90.67-17.53S253.11,554.43,251.87,534.18Z"/>
  </clipPath>
  <clipPath id="c">
    <path class="a" d="M34,535c0,11.74,44.42,31.42,105.73,31.42s106-21.18,106.26-30.94c.21-7.26-59.33-19.59-101.26-20.49S34,526,34,535Z"/>
  </clipPath>
  <clipPath id="d">
    <path class="a" d="M34,535c0,11.74,44.42,31.42,105.73,31.42s106-21.18,106.26-30.94c46.72-1.41,190.28-287.08-99.3-289.5C-30.26,245.55-77.63,476.67,34,535Z"/>
  </clipPath>
  <g class="b">
    <g>
      <rect class="c" width="960" height="700"/>
      <g>
        <g class="letter letter-h"><path class="d" d="M312.18,119.65H294V90.54H273v29.11H254.83V48.26H273V74.72h21V48.26h18.17Z"/></g>
        <g class="letter letter-a"><path class="e" d="M359.41,119.65,356,112.32h-.37a20.85,20.85,0,0,1-7.37,6.55,23,23,0,0,1-9.7,1.75q-7.32,0-11.53-4.68t-4.21-13.19q0-8.84,5.76-13.16t16.71-4.86l8.65-.29v-.78q0-6.84-6.32-6.84-5.67,0-14.42,4.11L328,68.33q9.06-5,22.89-5,10,0,15.44,5.27t5.47,14.75v36.28Zm-13.27-12.5a7.81,7.81,0,0,0,5.56-2.2A7.53,7.53,0,0,0,354,99.24v-4.3l-4.12.19q-8.83.34-8.83,6.94C341.06,105.45,342.75,107.15,346.14,107.15Z"/></g>
        <g class="letter letter-v"><path class="d" d="M397.58,119.65,377.81,64.32h18.67L405.27,97c0,.16.09.44.18.83s.18.85.27,1.39.18,1.11.26,1.71a14.61,14.61,0,0,1,.11,1.68h.32a20.68,20.68,0,0,1,.82-5.51l9.2-32.82h18.63l-19.77,55.33Z"/></g>
        <g class="letter letter-e"><path class="e" d="M466.27,120.62q-12.94,0-20.11-7.35T439,92.35q0-14,6.64-21.51t18.95-7.49q11.71,0,18.1,6.52t6.38,18.77v8.5h-32a9.71,9.71,0,0,0,3.18,7.27q3,2.64,8.17,2.64a37.27,37.27,0,0,0,8.67-1,41.46,41.46,0,0,0,8.58-3.25v13.72a30,30,0,0,1-8.69,3.17A56.15,56.15,0,0,1,466.27,120.62Zm-1-44.28a7.17,7.17,0,0,0-5.29,2.12q-2.13,2.13-2.49,6.67h15.38a10,10,0,0,0-2.13-6.4A6.8,6.8,0,0,0,465.22,76.34Z"/></g>
        <g class="letter letter-f"><path class="d" d="M555.19,78.63h-11v41H526.27v-41H519.4V69.26l7.23-4.69v-.93q0-10.94,4.19-15.72t13.43-4.79a37.27,37.27,0,0,1,6.75.59,50.53,50.53,0,0,1,7.4,2.05l-3.85,12.35a22.64,22.64,0,0,0-6.45-1,3.4,3.4,0,0,0-3,1.34,7.85,7.85,0,0,0-.94,4.37v1.46h11Z"/></g>
        <g class="letter letter-u"><path class="e" d="M599.17,119.65l-2.24-6.89h-1a14.93,14.93,0,0,1-6.25,5.84,20.57,20.57,0,0,1-9.4,2q-8.57,0-13.32-5.29t-4.76-15v-36H580V94.55c0,3.61.48,6.35,1.45,8.2a4.93,4.93,0,0,0,4.73,2.79,6.82,6.82,0,0,0,6.59-3.89q2-3.87,2-13.11V64.32h17.89v55.33Z"/></g>
        <g class="letter letter-n"><path class="d" d="M657.75,119.65V89.47q0-5.52-1.48-8.32a5,5,0,0,0-4.79-2.81,6.83,6.83,0,0,0-6.54,3.86q-2,3.85-2,13.23v24.22H625V64.32h13.5l2.24,6.84h1.06a14.43,14.43,0,0,1,6.34-5.86,21.2,21.2,0,0,1,9.31-1.95q8.6,0,13.39,5.32t4.78,15v36Z"/></g>
        <g class="letter letter-exc"><path class="e" d="M702.83,94.45h-15.1L685.4,48.26h19.77Zm-17.25,17.09a9.33,9.33,0,0,1,2.47-6.91c1.65-1.64,4-2.46,7.19-2.46s5.46.82,7.07,2.46a9.51,9.51,0,0,1,2.4,6.91,9.18,9.18,0,0,1-2.5,6.86,9.5,9.5,0,0,1-7,2.47,9.83,9.83,0,0,1-7.1-2.47A9.06,9.06,0,0,1,685.58,111.54Z"/></g>
      </g>
      <g>
        <path class="f" d="M609.5,341.67c-.18,2.26,11.16,7,16.66,6.54-.9,2.38,1.34,2.08,2.67,2.67s14.87,1,17.85-.59,4.16-4.76,5.35-5.35c4.31.59,33.92-2.34,35.43-4.81.9,4.21,78.89-.88,78.89-8.79,0-9-58.41-11.33-82.21-7.22-20.53,3.55-57.69,11.3-61.55,12.19S609.8,338,609.5,341.67Z"/>
        <g>
          <path class="d" d="M663.14,340.52c12.22-.95,24.42-.07,33-10.13,15.19-17.92,16.38-57.42,13.77-79.65-3.23-27.57-21.06-55.28-50.81-54.07A59,59,0,0,0,612.1,224c-10.26,16.59-8.21,37.38-4.13,55.54C611.68,296,616,317,628.38,329.34,637.52,338.47,650.24,341.54,663.14,340.52Z"/>
          <path class="i" d="M612.1,224c-10.26,16.59-8.21,37.38-4.13,55.54,2.83,12.58,6,27.76,12.88,39.74a5.33,5.33,0,0,0,.9.39c-13.43-41.42-14-83.71,3.75-101.7,2.54-2.57-13.26,19.42-6.26,73.71,6.43-68.84,21.55-84,25.38-85.19,0,0-16,22.5-10.27,65.88-1.28-26.26,15.1-61.77,24-65.81,11.49,2.57,17.06,18.58,20.38,27.76-1.28-17.85-6.1-33.86-19.73-37.62A59,59,0,0,0,612.1,224Z"/>
          <g>
            <g class="open right">
              <path class="l" d="M691.71,286.34c7.7-.14,8.5,16.83-.66,17.33S682.55,286.51,691.71,286.34Z"/>
              <path class="l" d="M691.4,298.51c1.37-.91,3.33.2,4.94-.15,1.91-.41,3.16-1.77,4.82-2.65a.28.28,0,0,1,.38.2c.28,2.4-2.16,4.14-4.19,4.81-1.66.56-5.87,1.09-6.25-1.4A.84.84,0,0,1,691.4,298.51Z"/>
              <path class="l" d="M693.11,293.69c1-.62,2-.36,3-.58s2.09-.8,3.16-1.05a.32.32,0,0,1,.42.37c-.21,1.6-1.62,2.45-3.13,2.83s-3.07.48-3.71-1A.48.48,0,0,1,693.11,293.69Z"/>
            </g>
            <g class="open left">
              <path class="l" d="M630.49,286.34c-7.7-.14-8.5,16.83.66,17.33S639.65,286.51,630.49,286.34Z"/>
              <path class="l" d="M621,297.07a.39.39,0,0,1,.14-.17l.11,0a.56.56,0,0,1,.62,0,17.51,17.51,0,0,0,2.76,1.65,13.44,13.44,0,0,0,3.13.67,1.13,1.13,0,0,1,.9,1.55,1.23,1.23,0,0,1-1.15.79,7.85,7.85,0,0,1-6.59-3.83A.68.68,0,0,1,621,297.07Z"/>
              <path class="l" d="M622.94,293.22a13.45,13.45,0,0,1,1.45,1.27,7.59,7.59,0,0,0,1.82,1.13,2.49,2.49,0,0,1,1.45,1.12.83.83,0,0,1,.05.35c0,.08,0,.15-.05.23a.78.78,0,0,1-.69.52c-1.16.22-2.46-.62-3.31-1.33a4.09,4.09,0,0,1-1.7-2.91C622,293,622.6,293,622.94,293.22Z"/>
            </g>
            <path class="l" d="M656.52,304.92c.57,2.81,2,5.33,5,5.92,3.77.74,5.79-2,5.64-5.47-.07-1.41,2.1-2.83,2.78-1.09,1.76,4.53-2.1,9.49-6.61,10.13a8.89,8.89,0,0,1-10-8.68C653.32,303.83,656.06,302.67,656.52,304.92Z"/>
            <path class="l blink left" d="M630.48,291.88c-3.08.35-5.32,3.47-5.6,6.53a3.72,3.72,0,0,1-.7-.33,10,10,0,0,1-1.39-1.22,1,1,0,0,0-1.58,1.09,4.42,4.42,0,0,0,3.86,2.71,2,2,0,0,0,.07.26c.21.66,1.5,1.2,1.89.4,1.08-2.22.48-5.07,3.18-6.33,3.5-1.64,4.34,3,5.24,5.21.4,1,2.27,1.23,2.25-.14C637.67,296.27,634.83,291.37,630.48,291.88Z"/>
            <path class="l blink right" d="M691.82,291.72c3.08.36,5.32,3.47,5.6,6.53a3.72,3.72,0,0,0,.7-.33,10,10,0,0,0,1.39-1.22,1,1,0,0,1,1.59,1.09,4.44,4.44,0,0,1-3.86,2.71c0,.09,0,.18-.07.27-.22.65-1.51,1.19-1.9.39-1.08-2.22-.48-5.06-3.17-6.33-3.51-1.64-4.34,3-5.24,5.21-.41,1-2.27,1.23-2.26-.14C684.63,296.12,687.48,291.22,691.82,291.72Z"/>
          </g>
          <g>
            <path class="m" d="M664.82,226c1.18-1.9,2.23-4.16,3.8-5.77.57-.57,1.34.08,1.11.78a22,22,0,0,1-2.5,4.61,22.07,22.07,0,0,1,5.58.24c.51.11.68,1,.11,1.15-2.35.64-4.91.49-7.33.56A1,1,0,0,1,664.82,226Z&quo.........完整代码请登录后点击上方下载按钮下载查看