gsap+svg实现彩色横条堆叠动画效果代码-html代码-BFW代码库

gsap+svg实现彩色横条堆叠动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现彩色横条堆叠动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          padding: 0;
          margin: 0;
          display: flex;
          min-height: 100vh;
          background: #262626;
          overflow: hidden;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        
        svg {
          max-width: 90vw;
          max-height: 90vh;
        }
    </style>



</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <defs>

    <clipPath id="theClipPath">
      <circle fill="#7AC943" cx="200" cy="200" r="125" />
    </clipPath>
  </defs>

  <path d="M200,70c34.7,0,67.4,13.5,91.9,38.1c24.6,24.6,38.1,57.2,38.1,91.9s-13.5,67.4-38.1,91.9C267.4,316.5,234.7,330,200,330
			s-67.4-13.5-91.9-38.1C83.5,267.4,70,234.7,70,200s13.5-67.4,38.1-91.9C132.6,83.5,165.3,70,200,70 M200,50
			c-82.8,0-150,67.2-150,150s67.2,150,150,150s150-67.2,150-150S282.8,50,200,50L200,50z" fill="white" />
  <g clip-path="url(#theClipPath)">
    <rect x="50" y="297.7" fill="#2E3192" width="300" height=&q.........完整代码请登录后点击上方下载按钮下载查看