gsap+svg纸飞机动画显示logo示例代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap+svg纸飞机动画显示logo示例代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
  background-color: #0D1317;
}

.logo {
  display: flex;
  height: auto;
  left: 50%;
  max-width: 37vw;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 484px;
}
.logo svg {
  display: block;
  height: 100%;
  width: 100%;
}

.logo-g,
.logo-sap {
  height: 100%;
  width: 100%;
  z-index: 4;
}

.logo-g {
  position: relative;
}
.logo-g:before {
  background: #0D1317;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  transform: translateX(-85%);
  width: 50%;
  z-index: -1;
}

.logo-sap {
  position: absolute;
}

.logo-g-line,
.logo-g-end {
  height: auto;
  left: 14%;
  position: absolute;
  top: 45%;
  width: 156.4%;
  z-index: 3;
}

.logo-g-line {
  overflow: hidden;
  transform: translateX(2%);
}
.logo-g-line svg {
  transform: translateX(-92%);
}

.logo-plane {
  height: 32.9%;
  opacity: 0;
  position: absolute;
  width: 25.8%;
  z-index: 2;
}

.logo-path {
  bottom: 51%;
  height: 178%;
  left: -59%;
  position: absolute;
  width: 147.3%;
  z-index: 1;
}
.logo-path svg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.logo-path path {
  visibility: hidden;
}
.logo-path .offset-1,
.logo-path .offset-3 {
  transform: translateX(-0.5%) translateY(-0.5%);
}
.logo-path .offset-2,
.logo-path .offset-4 {
  transform: translateX(0.5%) translateY(0.5%);
}

.audio-toggle {
  appearance: none;
  background: #05F34A;
  border: none;
  bottom: 20px;
  cursor: pointer;
  font-size: 14px;
  left: 50%;
  padding: 13px 20px;
  position: fixed;
  transform: translateX(-50%);
}
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="logo">
        <div class="logo-g">
            <svg preserveAspectRatio="none" viewBox="0 0 484 182" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M121.079 112.639C121.079 112.639 121.079 112.676 121.079 112.688C116.737 125.613 114.671 129.955 110.76 138.489C103.738 154.046 95.3756 165.164 85.6724 171.854C75.9692 178.544 64.9379 181.889 52.5537 181.889C39.5178 181.889 28.8062 178.544 20.4435 171.854C12.253 165.164 6.48519 155.965 3.14012 144.257C-0.0573802 132.402 -0.807562 118.849 0.864974 103.624C2.70968 84.8945 6.89102 67.9231 13.409 52.6981C19.927 37.3133 28.88 24.9414 40.2557 15.5703C51.7912 6.03929 65.3437 1.26764 80.9007 1.26764C90.936 1.26764 99.4585 3.35831 106.481 7.53965C113.515 11.721 118.865 18.1652 122.542 26.8599C126.391 35.5546 128.224 46.6844 128.064 60.2245C128.064 61.7372 127.695 62.7334 126.059 62.7334H87.4187C86.4226 62.7334 85.6601 62.143 85.6601 61.233C85.6601 54.8749 84.8238 50.0295 83.1513 46.6844C81.6509 43.3393 78.97 41.6668 75.1207 41.6668C70.6073 41.6668 66.18 44.5076 61.8265 50.1893C57.4852 55.8833 53.7958 63.2376 50.7951 72.2644C47.7821 81.3034 45.6053 90.7483 44.2648 100.624C44.2648 101.288 44.1787 101.878 44.0189 102.37C43.3425 108.728 43.0965 114.754 43.2687 120.436C43.6007 125.958 44.769 130.889 46.7736 135.243C48.9504 139.424 52.2955 141.515 56.8088 141.515C60.6581 141.515 64.3353 139.006 67.8525 133.988C71.5296 128.799 78.0599 112.983 78.146 112.7C102.5 91 96 89 121.079 112.639Z" fill="#05F34A"/>
                </svg>
            <div class="logo-g-line">
                <svg preserveAspectRatio="none" viewBox="0 0 757 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M756.542 2.44733C755.288 8.76853 751.82 20.71 750.393 27.0435C750.098 28.3717 749.286 29.5031 747.933 29.5031H53.3638V29.5523C53.3638 29.5523 24.7849 29.5646 10.4313 29.5646H2.51129C1.1462 29.5646 -0.292663 28.4085 0.0516829 27.1049C1.71192 20.7469 6.20075 2.50882 6.20075 2.50882C6.76646 0.590322 7.29526 0.0491942 8.66035 0.0491942L754.082 0C755.706 0 756.8 1.13143 756.542 2.45963V2.44733Z" fill="#05F34A"/>
                    </svg>
            </div>
            <div class="logo-g-end">
                <svg preserveAspectRatio="none" viewBox="0 0 757 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M79.374 2.44727C78.1196 8.76847 74.6516 20.7104 73.225 27.0439C72.9299 28.3721 72.1183 29.5029 70.7656 29.5029C48.0142 29.5029 25.2633 29.5645 2.51116 29.5645C1.14607 29.5645 -0.292659 28.4091 0.0516867 27.1055C1.71192 20.7474 6.20061 2.50879 6.20061 2.50879C6.76632 0.590292 7.29524 0.0498047 8.66033 0.0498047L76.9145 0C78.5378 0 79.6322 1.13177 79.374 2.45996V2.44727Z" fill="#05F34A"/>
                    </svg>
            </div>
        </div>
        <div class="logo-sap">
            <svg preserveAspectRatio="none" viewBox="0 0 484 182" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M155 30.7168L200.112 3H469V177H200.112V107.195L155 30.7168Z" fill="#0D1317"/>
                    <path d="M458.328 181.951C464.083 181.951 468.597 177.523 468.597 171.547C468.597 165.57 464.083 161.142 458.328 161.142C452.572 161.142 448.01 165.57 448.01 171.547C448.01 177.523 452.56 181.951 458.328 181.951ZM450.457 171.51C450.457 166.443 453.47 163.122 458.328 163.122C463.186 163.122 466.149 166.431 466.149 171.51C466.149 176.589 463.186 179.934 458.328 179.934C453.47 179.934 450.457 176.626 450.457 171.51ZM453.814 177.093H457.086V173.096H458.033C460.48 173.096 459.41 176.626 460.013 177.093H463.407V176.921C462.767 176.749 463.8 172.321 460.96 171.854V171.805C462.337 171.51 463.235 170.514 463.235 169.013C463.235 166.861 461.685 165.705 459.189 165.705H453.814V177.093ZM457.086 170.686V168.017H458.205C459.324 168.017 459.963 168.361 459.963 169.345C459.963 170.243 459.324 170.673 458.205 170.673H457.086V170.686Z" fill="#05F34A"/>
                    <path d="M476.798 27.1307C472.113 18.768 465.25 12.6682 456.224 8.81888C447.197 4.96959 436.067 3.05109 422.859 3.05109H394.512C393.836 3.05109 393.257 3.21097 392.753 3.55531C392.421 3.88736 392.163 4.3055 392.003 4.80972L355.871 176.405C355.699 177.081 355.871 177.659 356.376 178.163C356.88 178.495 357.458 178.667 358.134 178.667H395.262C395.766 178.667 396.258 178.495 396.762 178.163C397.267 177.831 397.599 177.413 397.771 176.909L402.186 155.756C402.407 154.674 401.891 153.567 400.895 153.063L383.8 144.307C383.21 143.999 383.444 143.114 384.108 143.151C390.773 143.458 407.007 144.171 408.064 144.061H408.815C423.203 143.052 435.993 139.043 447.209 132.009C458.573 124.986 467.526 115.209 474.043 102.665C480.574 90.1214 483.833 75.4867 483.833 58.7613C483.833 45.8729 481.496 35.3458 476.811 27.143L476.798 27.1307ZM438.662 81.5742C436.657 88.2644 433.73 93.7001 429.881 97.8814C426.032 102.063 421.605 104.24 416.587 104.399H416.329C414.828 104.399 413.82 104.24 413.328 103.908C413.143 103.649 413.057 103.243 413.07 102.702C413.082 102.21 413.168 101.608 413.328 100.894L423.24 53.178C423.462 52.0958 422.933 50.9889 421.949 50.4847L404.744 41.667C404.166 41.3719 404.387 40.4864 405.039 40.511L427.471 41.1259C429.635 41.1874 431.812 41.3964 433.841 42.1466C437.58 43.5117 439.572 46.7953 440.408 49.4763C441.404 52.145 441.909 55.5761 441.909 59.7575C441.909 67.456 440.826 74.7242 438.65 81.5865L438.662 81.5742Z" fill="#05F34A"/>
                    <path d="M221.343 178.655C220.077 178.667 219.843 177.351 220.089 176.699C220.359 175.998 290.04 7.55169 291.27 4.77232C291.971 3.43183 292.18 3.026 295.082 3.026H350.018C351.752 3.0137 352.268 3.94835 352.268 5.01829L352.514 36.1201L351.764 133.213L352.268 176.109C352.268 176.773 352.096 177.363 351.764 177.868C351.432 178.372 350.928 178.618 350.264 178.618H311.131C310.467 178.618 309.877 178.446 309.373 178.114C309.041 177.609 308.869 177.031 308.869 176.355L309.619 161.806C309.803 159.076 308.746 158.043 306.101 158.043H274.741C274.114 158.043 273.561 158.08 273.081 158.154C272.208 158.289 271.495 158.879 271.15 159.691C270.339 161.585 265.21 175.334 264.718 176.712C264.546 177.191 264.362 177.683 264.005 178.04C263.292 178.741 262.173 178.667 261.25 178.667C260.697 178.667 222.376 178.642 221.343 178.667V178.655ZM287.322 116.18C287.322 116.18 287.322 116.205 287.31 116.23C286.818 117.693 287.937 119.206 289.474 119.243C294.332 119.341 304.626 119.599 308.438 119.538C309.508 119.526 310.418 118.788 310.664 117.742C310.762 117.3 310.849 116.771 310.91 116.18L314.169 52.4519C314.341 50.9515 314.169 49.9431 313.665 49.4389C313.161 48.7748 312.496 48.7748 311.66 49.4389C310.996 49.9431 310.406 50.8655 309.902 52.1937L287.322 116.168V116.18Z" fill="#05F34A"/>
                    <path d="M175.116 181.742C175.005 181.742 174.882 181.742 174.772 181.742C162.388 181.828 149.413 179.061 140.091 170.895C128.703 160.921 124.78 144.589 125.776 129.487C125.826 128.799 125.899 128.061 126.33 127.532C126.957 126.769 128.088 126.708 129.072 126.708C140.534 126.708 151.983 126.708 163.445 126.708C164.97 126.708 167.381 126.486 167.479 128.257C167.577 130.028 167.541 131.061 167.541 131.061C167.319 136.854 169.275 143.79 175.03 144.589C178.412 145.057 181.782 142.868 183.405 139.867C185.028 136.866 185.139 133.238 184.487 129.893C183.27 123.596 179.605 118.05 175.657 112.996C166.606 101.386 155.501 91.1172 149.081 77.8599C145.97 71.428 144.125 64.3936 143.547 57.2853C142.969 50.1278 143.67 42.8597 145.662 35.9604C146.154 34.2387 146.732 32.5293 147.396 30.869C147.999 29.3318 151.307 23.441 152.242 22.1005C153.176 20.76 154.234 19.4072 155.341 18.1405C159.768 13.0737 165.265 8.95389 171.304 5.99006C171.968 5.65801 172.644 5.35056 173.321 5.0554C183.233 0.70189 194.326 -0.675494 205.111 0.296053C214.445 1.13232 223.866 3.8379 231.134 9..........完整代码请登录后点击上方下载按钮下载查看