lenis实现网页滚动文字立体放大穿越动画代码-html代码-BFW代码库

lenis实现网页滚动文字立体放大穿越动画代码

代码语言：html

代码描述：lenis实现网页滚动文字立体放大穿越动画代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lenis.1.3.11.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;800&family=Syncopate:wght@400;700&display=swap"
        rel="stylesheet">
  
  
  
<style>
:root {
            --bg: #030303;
            --card-bg: rgba(10, 10, 10, 0.4);
            --text: #e0e0e0;
            --accent: #ff003c;
            /* Cyber Red */
            --accent-2: #00f3ff;
            /* Cyber Cyan */
            --border: rgba(255, 255, 255, 0.1);
            --font-display: 'Syncopate', sans-serif;
            --font-code: 'JetBrains Mono', monospace;
        }

        body {
            margin: 0;
            padding: 0;
            background: var(--bg);
            color: var(--text);
            font-family: var(--font-display);
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            cursor: crosshair;
        }

        /* --- POST PROCESSING & OVERLAYS --- */
        .scanlines {
            position: fixed;
            inset: 0;
            background: linear-gradient(to bottom,
                  .........完整代码请登录后点击上方下载按钮下载查看