gsap实现文字出场进场拉幕式动画效果代码-html代码-BFW代码库

gsap实现文字出场进场拉幕式动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现文字出场进场拉幕式动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;1,800&display=swap");
        
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        
        :root {
          --white: #f1eaea;
          --black: #181717;
        }
        
        body {
          height: 100vh;
          display: grid;
          place-items: center;
        
          background-color: var(--white);
        }
        
        .container {
          width: 100%;
          max-width: 800px;
          height: 300px;
          position: relative;
          overflow: hidden;
        }
        
        .slide-bar {
          position: absolute;
          top: 50%;
          left: 100px;
          transform: translateY(-50%) rotateZ(15deg);
          width: 10px;
          height: 600px;
          z-index: 10;
        }
        
        .bar {
          width: 100%;
          height: 150px;
          border-radius: 100px;
          background-color: var(--black);
        }
        
        .text-block {
          position: absolute;
          width: 100%;
          height: 100%;
          display: grid;
          place-items: center;
          background-color: var(--white);
        }
        .text-block h1 {
          font-family: "Raleway", sans-serif;
          font-size: 5rem;
          font-weight: 800;
          font-style: italic;
          letter-spacing: 2px;
          position: relative;
          perspective: 500px;
          transform-style: preserve-3d;
          color: var(--black);
        }
        .text-block h1::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100px;
          left: 0;
          background: radial-gradient(var(--black), transparent 70%);
          transform: translateY(100px) rotateX(-60deg);
          opacity: 0.3;
        }
        
        #textone {
          z-index: 6;
          clip-path: polygon(0 0, 18% 0, 8% 100%, 0% 100%);
        }
        #texttwo {
          z-index: 4;
          clip-path: polygon(0 0, 91% 0, 81% 100%, 0% 100%);
        }
        
        button {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 3px solid var(--black);
          background-color: var(--white);
          position: fixed;
          bottom: 20%;
          left: 50%;
          transform: translateX(-50%);
          cursor: pointer;
          opacity: 0.4;
          transition: opacity 0.3s;
        }
        button:hover {
          opacity: 1;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="slide-bar" id="slidebar">
            <div class="bar" id="bar"></div>
        </div>
        <div class="text-block" id="textone">
            <h1>BFW.WIKI</h1>
        </div>
        <div class="text-block" id="texttwo">
            <h1>CODE STORE</h1>
        </div>
    </div.........完整代码请登录后点击上方下载按钮下载查看