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: #0e100f;
  overflow: hidden;
}

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

.logo-inner {
  display: flex;
  height: 100%;
  transform: translateX(-150vw);
  width: 100%;
}

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

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

.logo-sap {
  position: absolute;
  z-index: 3;
}
.logo-sap:before {
  background: #0e100f;
  bottom: -300%;
  content: "";
  left: -100vw;
  position: absolute;
  right: -100vw;
  top: 50%;
  z-index: -1;
}

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

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

.logo-shapes {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 2;
}
.logo-shapes > img {
  left: 0;
  opavity: 0;
  position: absolute;
  top: 0;
  transform: translateX(-5000%);
}

.logo-path {
  bottom: -40%;
  height: 250%;
  left: -67.5%;
  position: absolute;
  width: 185.25%;
  z-index: 1;
}
.logo-path svg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.logo-path path {
  visibility: hidden;
}

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


  
</head>

<body translate="no">
  <div class="logo">
        <div class="logo-inner">
                <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..........完整代码请登录后点击上方下载按钮下载查看