gsap+svg春暖花开动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+svg春暖花开动画效果代码

代码标签：效果

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
body {
  background-color: lightblue;
}

.main {
  display: grid;
  place-items: center;
  width: max(70vw, 90%);
  margin: 0 auto;
  min-height: 100vh;
}

.stems path {
  transform-origin: bottom center;
}

.flowers > g,
.stems path {
  opacity: 0;
}
</style>



</head>

<body translate="no" >
  <main class="main">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1422 395.45" data-stage="1" class="spring-scene">
    <defs>
      <style>
        .cls-1 {
          fill: #272f59;
        }

        .cls-2,
        .cls-8 {
          fill: #8c7e51;
        }

        .cls-3 {
          fill: #a68e46;
        }

        .cls-4,
        .cls-5,
        .cls-9 {
          fill: none;
        }

        .cls-4,
        .cls-5,
        .cls-8 {
          stroke: #616858;
          stroke-width: 3px;
        }

        .cls-4 {
          stroke-linejoin: bevel;
        }

        .cls-10,
        .cls-5,
        .cls-8,
        .cls-9 {
          stroke-miterlimit: 10;
        }

        .cls-6 {
          fill: #6080bf;
        }

        .cls-7 {
          fill: #384c73;
        }

        .cls-10,
        .cls-9 {
          stroke: #8c7e51;
          stroke-width: 4px;
          fill: none;
        }

        .cls-11 {
          fill: #7b6994;
        }
      </style>
    </defs>
    <g id="Layer_2" data-name="Layer 2">
      <g id="Social_share" data-name="Social share">
        <g id="Layer_19" data-name="Layer 19">
          <g>
            <path class="cls-1" d="M392.06,283c42.13,0,60.52-36,60.52-80,0-60.13-49.79-102.65-49.79-145.16C402.79,16.47,435,0,460.62,0c26.81,0,42.89,16.47,42.89,39.45,0,23.74-14.93,36-31.79,36-7.27,0-14.93-3.83-14.93-11.11,0-5,3.06-8.42,8-8.42,8,0,8.43,10.34,14.55,10.34,7.28,0,17.24-8.43,17.24-26.43,0-19.15-13.79-29.49-33.7-29.49C441.47,10.34,425,23,425,49.41c0,41.74,60.9,84.26,60.9,146.3,0,64.34-39.84,98-91.16,98-42.13,0-81.19-24.13-81.19-66.26,0-34.85,22.59-61.66,54.77-61.66,16.47,0,28,7.27,34.08,15.7,5,6.89,7.28,15.7,7.28,21.06,0,1.92-.77,2.69-1.53,2.69-1.15,0-1.92-.77-1.92-2.69,0-5.36-9.19-19.15-25.28-19.15-20.68,0-40.59,19.15-40.59,50.18C340.36,259.29,362.57,283,392.06,283Z" />
            <path class="cls-1" d="M615,190.73c14.55,0,24.13-5,33.32-18.38,0,0,1.15-1.92,2.3-1.92a1.81,1.81,0,0,1,1.91,1.92,8.35,8.35,0,0,1-1.15,3.06c-6.89,10.73-13.79,14.94-20.3,17.24a49.68,49.68,0,0,1-18.38,3.06c-10.34,20.3-31.41,32.94-49.41,32.94-17.23,0-28.72-7.28-28.72-21.83,0-11.88,12.25-21.07,25.66-21.07a158.16,158.16,0,0,1,24.89,2.3c2.3-6.89,3.83-19.15,3.83-27.57,0-17.62-6.12-24.52-15.31-24.52-9.58,0-29.88,13.41-41.75,37.92-18,36.77-22.22,105.32-22.22,147.07,0,21.45,2.69,33.32,2.69,37.92,0,2.68-1.54,4.59-5.37,4.59-8,0-24.51-8-26.42-19.53A131.39,131.39,0,0,1,479,325.55c0-28.35,6.52-74.69,19.54-124.09,10.34-39.84,15.32-59.75,15.32-66.65,0-7.27-2.3-10-2.3-11.87,0-2.3,1.15-3.45,3.06-3.45s5.75,1.92,7.66,3.45c6.51,5,11.11,10.73,11.11,20.68,0,4.6-3.06,19.92-4.21,23.37,11.87-21.45,32.55-41.37,55.91-41.37,19.15,0,34.47,13,34.47,40.22A77.46,77.46,0,0,1,615,190.73Zm-31.41,1.92a121.47,121.47,0,0,0-22.6-2.3c-7.65,0-15.31,4.59-15.31,11.87,0,6.51,4.59,10.73,13.78,10.73C569,213,577.82,204.9,583.56,192.65Z" />
            <path class="cls-1" d="M759.74,172.35s1.15-1.92,2.3-1.92a1.81,1.81,0,0,1,1.91,1.92,8.35,8.35,0,0,1-1.15,3.06c-14.17,22.22-37.15,53.24-66.64,53.24-19.91,0-29.87-9.58-29.87-24.13,0-15.32,15.32-28.34,15.32-37.15,0-3.83-11.11-8.43-18.39-14.94-3.44,8-6.89,14.17-12.25,23a2.84,2.84,0,0,1-2.3,1.53,1.81,1.81,0,0,1-1.92-1.91,5.89,5.89,0,0,1,1.15-2.68,163.27,163.27,0,0,0,12.26-22.22c-3.83-4.21-8.43-12.25-8.43-18.38,0-12.64,7.28-18.38,16.47-18.38,6.51,0,11.49,4.21,11.49,10.72,0,6.89-2.68,10.72-10,18.38,0,7.28,39.45,5,39.45,18,0,13.4-10.34,26-10.34,42.12,0,8.05,6.13,11.49,12.64,11.49C732.16,214.09,747.87,191.5,759.74,172.35Z" />
            <path class="cls-1" d="M835.57,172.35s1.15-1.92,2.3-1.92a1.81,1.81,0,0,1,1.91,1.92,8.35,8.35,0,0,1-1.15,3.06c-14.17,22.22-37.53,53.24-64,53.24-19.53,0-28-10.34-28-23.75,0-30.64,25.28-49.79,25.28-66.26,0-8.42-1.92-8.8-1.92-10.72,0-1.15.77-2.3,2.69-2.3s5.36,1.92,7.27,3.45c6.9,5,11.11,11.87,11.11,21.83,0,11.11-12.26,26.43-12.26,47.87,0,8.81,6.51,12.26,13.79,12.26C807.61,211,823.69,191.5,835.57,172.35ZM795.35,73.92c7.28,0,13,3.83,13,10.72,0,8.81-6.89,20.68-14.17,20.68s-13.4-5-13.4-11.49C780.8,85.41,788.08,73.92,795.35,73.92Z" />
            <path class="cls-1" d="M983.79,172.35s1.15-1.92,2.29-1.92a1.82,1.82,0,0,1,1.92,1.92,8.35,8.35,0,0,1-1.15,3.06c-14.17,22.22-37.15,53.24-64,53.24-18.77,0-27.58-9.58-27.58-24.9,0-24.89,23.75-44.81,23.75-58.21,0-6.13-3.45-9.58-9.58-9.58-9.57,0-32.55,17.62-44,39.07C859.7,185.75,854,206.82,854,220.22c0,4.6-6.89,8.43-15.7,8.43-6.13,0-15.71-3.45-15.71-19.92,0-29.49,21.83-50.55,21.83-74.68,0-6.51-1.91-8.81-1.91-11.11a2.82,2.82,0,0,1,3.07-3.06c7.27,0,21.83,13,21.83,22.21,0,8.43-1.92,20.3-3.07,25.66,11.11-17.23,36-42.13,56.3-42.13,15.7,0,21.83,8.81,21.83,20.68,0,16.09-13,37.92-13,52.09,0,7.28,5,11.49,12.64,11.49C957,209.88,971.91,191.5,983.79,172.35Z" />
            <path class="cls-1" d="M1089.49,269.63c0,53.23-28.72,94.22-72.77,94.22-24.51,0-39.83-17.62-39.83-36,0-12.63,5.36-23,13.41-29.1,6.89-5.37,14.17-8.81,19.15-8.81,2.29,0,3.06.76,3.06,1.91,0,1.53-.77,1.92-3.06,2.3a22.58,22.58,0,0,0-17.62,22.21c0,13.41,10.34,22.6,24.51,22.6,34.09,0,45.58-46.34,45.58-77.75,0-23.36-3.07-45.19-5.75-60.51-6.89,9.19-20.68,28-42.13,28-17.23,0-35.62-8-35.62-35.62,0-34.47,28.73-67.41,65.11-67.41,17.62,0,23.75,10.73,25.66,14.17,6.13-8.42,14.56-11.49,19.54-11.49,7.27,0,11.1,5,11.1,12.26,0,13-12.63,32.17-23,44.43C1076.85,198.77,1089.49,223.29,1089.49,269.63Zm-37.91-137.5c-23.75,0-41.75,28.35-41.75,59.37,0,15.32,8.81,24.13,18.38,24.13,12.64,0,20.68-11.49,26.81-21.07a71.34,71.34,0,0,1-.38-8.81c0-17.23,3.83-30.64,11.49-42.13C1065.36,139.79,1058.47,132.13,1051.58,132.13Z" />
          </g>
        </g>
        <g>
          <g>
            <path class="cls-2" d="M1119.26,316.33c-1.19-5.2.25-10.77,3.1-15.26a37.44,37.44,0,0,1,11.42-10.92c4.12-2.7,9.47-4.95,13.78-2.57s5.3,8.52,3.31,13-6.19,7.55-10.45,9.93C1133.63,314.32,1126.18,316.91,1119.26,316.33Z" />
            <path class="cls-2" d="M1114.88,316.39c-1.17-4.24-6-6.46-10.27-8.15-5.51-2.16-11.6-4.36-17.31-2.63s-9.66,7.67-8.78,13.23a7.49,7.49,0,0,0,1.69,3.86,9.78,9.78,0,0,0,5.14,2.62,23.41,23.41,0,0,0,11.22-.19C1104.21,323.08,1115.54,319,1114.88,316.39Z" />
            <path class="cls-2" d="M1112.8,281.57c0-5.34,2.61-10.45,6.38-14.19a37.27,37.27,0,0,1,13.55-8.08c4.61-1.71,10.32-2.7,14,.59s3.29,9.49.36,13.41-7.7,6-12.38,7.35C1127.25,282.82,1119.42,283.68,1112.8,281.57Z" />
            <path class="cls-2" d="M1107.49,282c-1.18-4.24-6-6.46-10.28-8.15-5.5-2.17-11.59-4.36-17.31-2.63s-9.66,7.67-8.78,13.23a7.54,7.54,0,0,0,1.7,3.86,9.67,9.67,0,0,0,5.13,2.61,23.16,23.16,0,0,0,11.22-.19C1096.82,288.68,1107.87,283.85,1107.49,282Z" />
            <path class="cls-2" d="M1112.18,246.56c.83-4.47,4.18-8.14,8.43-10.41s9.31-3.24,14.42-3.63c4.74-.36,10.44.13,13.5,3.74s1.71,8.71-1.76,11.32-8.41,3.22-13.17,3.28C1126,251,1118.28,249.86,1112.18,246.56Z" />
            <path class="cls-2" d="M1109.6,247.26c1.26-4.66-4-7.84-7.73-10.63-4.73-3.57-10-7.33-16-7.21s-11.35,4.77-12,10.37a7.41,7.41,0,0,0,.61,4.17,9.73,9.73,0,0,0,4.25,3.91c3.3,1.81,7.18,3.93,11,4C1097.64,251.94,1109.75,249,1109.6,247.26Z" />
            <path class="cls-2" d="M1147.73,141.07c3.09-3.11,2.64-8.42,2-13-.83-5.89-1.93-12.32-6.23-16.5s-11.38-4.74-15.75-1.24a7.36,7.36,0,0,0-2.5,3.37,9.86,9.86,0,0,0,.26,5.8,23.75,23.75,0,0,0,5.68,9.77C1136.7,135,1150.28,142.83,1147.73,141.07Z" />
            <path class="cls-2" d="M1154.69,161.36c2.54,3.59,6.5,4.09,11.11,4.2,5.9.14,12.36.11,17.15-3.49s6.48-10.53,3.77-15.46a7.41,7.41,0,0,0-2.9-3.05,9.68,9.68,0,0,0-5.71-.69,23.42,23.42,0,0,0-10.48,4C1161.15,151.46,1154,161.23,1154.69,161.36Z" />
            <path class="cls-2" d="M1128.48,211c2.8-4.52,7.73-7.43,12.89-8.57a37.22,37.22,0,0,1,15.75.44c4.81,1,10.17,3.25,11.56,8s-2.22,9.8-6.78,11.54-9.68.93-14.37-.43C1140.07,219.85,1133,216.37,1128.48,211Z" />
            <path class="cls-2" d="M1126.83,20.........完整代码请登录后点击上方下载按钮下载查看