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

gsap+svg纸飞机动画显示logo示例代码

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