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.8.........完整代码请登录后点击上方下载按钮下载查看