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: #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.25.........完整代码请登录后点击上方下载按钮下载查看