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>
* {
  box-sizing: border-box;
  margin: 0;
  font-family: sans-serif;
}

:root {
  --text: #000;
  --background: #fff;
}

svg {
  fill: currentColor;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--text);
  color: var(--background);
}
.loader__logo {
  width: calc(100vw / 24 * 3.2666666667);
  border-top: calc(100vw / 24 * 0.0666666667) solid var(--background);
  clip-path: inset(0 100% 0 0);
}
.loader__logo svg {
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to bottom, transparent, black calc(100vw / 24 * 0.1666666667));
}
.loader__logo svg path {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(calc(-105% - calc(100vw / 24 * 0.1666666667)));
}
</style>

  
</head>

<body translate="no">
  <div class="loader">
        <div class="loader__logo">
                <svg viewBox="0 0 192 42" xmlns="http://www.w3.org/2000/svg">
                        <g transform="translate(0 10)">
                                <path d="M0 30.682V0.517111H11.2862C13.6985 0.517111 15.6944 0.933676 17.2738 1.7668C18.8821 2.59993 20.0738 3.72034 20.8492 5.12804C21.6246 6.50701 22.0123 8.04398 22.0123 9.73896C22.0123 11.3478 21.6246 12.856 20.8492 14.2637C20.1026 15.6427 18.9251 16.7631 17.3169 17.6249C15.7374 18.4581 13.6985 18.8746 11.2 18.8746H5.81538V30.682H0ZM15.6369 30.682L9.43385 17.4095H15.7231L22.2708 30.682H15.6369ZM5.81538 14.6515H10.8985C12.679 14.6515 13.9856 14.2206 14.8185 13.3588C15.6513 12.4969 16.0677 11.3621 16.0677 9.95442C16.0677 8.54673 15.6513 7.44068 14.8185 6.63628C13.9856 5.80316 12.679 5.38659 10.8985 5.38659H5.81538V14.6515Z"></path>
                                <path d="M39.551 31.1992C36.5643 31.1992 33.9366 30.5384 31.6679 29.2169C29.4279 27.8954 27.6618 26.0711 26.3695 23.7441C25.0772 21.3884 24.431 18.6735 24.431 15.5996C24.431 12.5.........完整代码请登录后点击上方下载按钮下载查看