gsap实现svg动画播放控制效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap实现svg动画播放控制效果代码

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


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

<head>

  <meta charset="UTF-8">

  <link href="https://fonts.googleapis.com/css?family=Raleway:400,800|Satisfy&display=swap" rel="stylesheet">
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(30, 20, 30);
  color: linen;
  font-family: "Satisfy", cursive;
  letter-spacing: 1.2px;
}

main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  visibility: hidden;
}

article {
  position: relative;
  left: 50px;
  top: 10vh;
}

h1,
h2 {
  font-family: "Raleway", sans-serif;
  font-size: 40px;
}

h1 {
  font-weight: 800;
  color: #ff6584;
}

h2 {
  font-weight: 400;
}

p {
  font-size: 20px;
  margin-top: 20px;
}

input {
  padding: 8px 14px;
  border-radius: 20px;
  background-color: rgb(30, 20, 30);
  border-bottom: 1px solid rgba(200, 200, 200, 0.5);
  border-right: 1px solid rgba(200, 200, 200, 0.5);
  border-left: 1px solid rgba(120, 120, 120, 0.4);
  border-top: 1px solid rgba(120, 120, 120, 0.4);
  box-shadow: 2px 2px 5px rgba(120, 120, 120, 0.2) inset;
  color: inherit;
}

input:focus {
  outline: none;
}

a:link,
a:visited {
  color: linen;
}

a:hover,
a:active {
  color: #ff6584;
}

.show-text {
  margin-top: 20px;
  color: #ff6584;
  text-transform: uppercase;
}

.letter {
  display: inline-block;
}

.controller {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

button {
  padding: 8px 14px;
  border-radius: 20px;
  background-color: rgb(30, 20, 30);
  border-top: 1px solid rgba(200, 200, 200, 0.5);
  border-left: 1px solid rgba(200, 200, 200, 0.5);
  border-right: 1px solid rgba(120, 120, 120, 0.4);
  border-bottom: 1px solid rgba(120, 120, 120, 0.4);
  box-shadow: 2px 2px 5px rgba(120, 120, 120, 0.2),
    -4px -4px 5px rgba(120, 120, 120, 0.3);
  color: inherit;
  margin-right: 10px;
}
</style>



</head>

<body translate="no" >
  <main>
  <article>
    <h1>Happy</h1>
    <h2>520</h2>
    <p>What I'll be doing if this is over.</p>
    <div class="input-wrapper">
      <label for="checklist">What's your?</label>
      &nbsp;
      <input type="text" id="checklist">
    </div>
    <h2 class="show-text"></h2>
  </article>
  <div class="svg-wrapper">
    <!--     <svg xmlns="http://www.w3.org/2000/svg" id="balloons" data-name="Layer 1" width="743.40429" height="753.13373" viewBox="0 0 743.40429 753.13373"> -->
    <svg xmlns="http://www.w3.org/2000/svg" id="balloons" data-name="Layer 1" height="500" viewBox="0 0 743.40429 753.13373">
      <title>happy feeling</title>
      <g>
        <path d="M884.02338,360.16127C842.39655,196.47512,698.56275,78.31661,529.733,73.57737c-89.25523-2.50549-183.17665,27.0965-251.55836,130.68464-122.23971,185.175,7.51191,313.13661,97.97131,373.94142A566.02694,566.02694,0,0,1,493.14148,683.35864c61.10238,72.50779,178.64943,162.60891,318.64265,21.43431C913.25139,602.46943,911.751,469.19242,884.02338,360.16127Z" transform="translate(-228.29785 -73.43313)" fill="#f2f2f2" />
      </g>
      <path d="M955.20863,737.06376c0,32.26235-151.72264,89.50311-338.882,89.50311s-321.118-115.99853-321.118-148.26087,133.95866,31.42857,321.118,31.42857S955.20863,704.80141,955.20863,737.06376Z" transform="translate(-228.29785 -73.43313)" fill="#3f3d56" />
      <path d="M955.20863,737.06376c0,32.26235-151.72264,89.50311-338.882,89.50311s-321.118-115.99853-321.118-148.26087,133.95866,31.42857,321.118,31.42857S955.20863,704.80141,955.20863,737.06376Z" transform="translate(-228.29785 -73.43313)" opacity="0.1" />
      <path d="M955.20863,736.72215c0,32.26234-151.72264,58.41614-338.882,58.41614s-321.118-84.56995-321.118-116.83229,133.95866,0,321.118,0S955.20863,704.4598,955.20863,736.72215Z" transform="translate(-228.29785 -73.43313)" fill="#3f3d56" />
      <g opacity="0.7">
        <path d="M943.99062,249.26589c-12.292,23.85838-51.25117,51.97188-75.10956,39.67987s-23.58129-60.33479-11.28929-84.19317a48.59577,48.59577,0,0,1,86.39885,44.5133Z" transform="translate(-228.29785 -73.43313)" fill="#5860eb" />
        <path d="M870.89964,295.25478a8.05032,8.05032,0,0,0-8.32759-4.29044l4.29043-8.3276,8.3276,4.29044Z" transform="translate(-228.29785 -73.43313)" fill="#5860eb" />
        <path d="M864.83,286.63541a10.30467,10.30467,0,0,0,8.36009,4.26389" transform="translate(-228.29785 -73.43313)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2" />
        <ellipse cx="928.13292" cy="218.04387" rx="12.29531" ry="10.2461" transform="translate(80.9232 869.8155) rotate(-62.74216)" fill="#fff" opacity="0.4" />
        <!--         <line x1="640.35992" y1="215.81139" x2="604.10504" y2="307.04377" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2" /> -->
      </g>
      <g>
        <path d="M951.644,395.61836c-26.91169,27.1498-91.8722,48.66484-119.022,21.75315s-6.20783-92.05921,20.70387-119.209A69.21723,69.21723,0,0,1,951.644,395.61836Z" transform="translate(-228.29785 -73.43313)" fill="#ff6584" />
        <path d="M832.66353,426.8064a11.46647,11.46647,0,0,0-9.47645-9.39334l9.39334-9.47644,9.47645,9.39333Z" transform="translate(-228.29785 -73.43313)" fill="#ff6584" />
        <path d="M828.10753,412.49875a14.67743,14.67743,0,0,0,9.532,9.37117" transform="translate(-228.29785 -73.43313)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2" />
        <ellipse cx="943.46642" cy="346.41508" rx="17.51279" ry="14.594" transform="translate(-195.04707 699.17413) rotate(-45.25236)" fill="#fff" opacity="0.4" />
        <line x1="602.51563" y1="346.22772" x2="513.27994" y2="436.25297" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2" />
      </g>
      <g>
        <path d="M867.5301,307.663c-8.86788,37.18484-53.16533,89.34326-90.35016,80.47538s-53.17592-75.404-44.308-112.58879A69.21723,69.21723,0,0,1,867.5301,307.663Z" transform="translate(-228.29785 -73.43313)" fill="#5860eb" />
        <path d="M782.12185,396.17556a11.46645,11.46645,0,0,0-12.9791-3.09527l3.09527-12.9791,12.9791,3.09526Z" transform="translate(-228.29785 -73.43313)" fill="#5860eb" />
        <path d="M770.79,386.324a14.6774,14.6774,0,0,0,13.015,3.04747" transform="translate(-228.29785 -73.43313)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2" />
        <ellipse cx="834.95809" cy="269.88867" rx="17.51279" ry="14.594" transform="translate(150.44384 946.02975) rotate(-76.58659)" fill="#fff" opacity="0.4" />
        <line x1="548.67563" y1="317.585" x2="519.27091" y2="440.8851" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2" />
      </g>
      <g opacity="0.8">
        <path d="M455.36207,633.71133c-19.33018,18.81-65.42983,33.16077-84.23986,13.83059s-3.20748-65.02133,16.12269-83.83137a48.83661,48.83661,0,0,1,68.11717,70.00078Z" transform="translate(-228.29785 -73.43313)" fill="#5860eb" />
        <path d="M371.03143,654.1982a8.09023,8.09023,0,0,0-6.56551-6.74706l6.74706-6.56551,6.56551,6.74706Z" transform="translate(-228.29785 -73.43313)" fill="#5860eb" />
        <path d="M367.99956,644.047a10.35577,10.35577,0,0,0,6.60494,6.73213" transform="translate(-228.29785 -73.43313)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="2" />
        <ellipse cx="450.21956" cy="598.89724" rx="12.35625" ry="10.29687" transform="translate(-518.41331 410.22687) rotate(-44.21867)" fill="#fff" opacity="0.4" />
      </g>
      <path d="M436.85861,163.88584h13.58021a33.5923,33.5923,0,0,1,33.5923,33.5923v47.17251a0,0,0,0,1,0,0H403.2663a0,0,0,0,1,0,0V197.47815A33.5923,33.5923,0,0,1,436.85861,163.88584Z" fill="#2f2e41" />
      <path d=&.........完整代码请登录后点击上方下载按钮下载查看