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