js+css实现炫酷数字滚动动画效果代码-html代码-BFW代码库

js+css实现炫酷数字滚动动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现炫酷数字滚动动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="https://ka-p.fontawesome.com/releases/v6.5.1/css/pro.min.css?token=1ee8f271b9">
    

    <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=Orbitron:wght@900&display=swap" rel="stylesheet">

    <style>
        :root {
      --dark-rgb: 23 28 28;
      --darker-rgb: 8 13 7;
      
      --green: 9 252 8;
      --blue: 59 130 246;
      --pink: 231 60 126;
      
      --background-rgb: 12 12 12;
      --theme-rgb: var(--green);
    }
    
    body {
      background-color: black;
      height: 100vh;  
      overflow: hidden;
      font-family: "Orbitron", sans-serif;
    }
    
    button {  
      font-family: "Orbitron", sans-serif;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    #app {
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(
        60deg, 
        rgb(var(--background-rgb)) 30%, 
        rgb(var(--theme-rgb) / 8%) 50%, 
        rgb(var(--background-rgb)) 70%
      );
    }
    
    #shapes {
      height: calc(100% - 2rem);
      width: calc(100% - 2rem);  
      position: fixed;
      left: 0%;
      top: 0%;
      z-index: 1;
      margin: 1rem;
      border: 0.15rem dashed rgb(var(--theme-rgb) / 30%);
      pointer-events: none;
    }
    
    #shapes:before,
    #shapes:after {
      content: "";
      position: absolute;
      background-color: rgb(255 255 255 / 15%);
    }
    
    #shapes:before {
      height: 0.2rem;
      width: 30%;
      min-width: 10rem;
      left: 10%;
      top: 20%;
    }
    
    #shapes:after {
      width: 0.2rem;
      heigh.........完整代码请登录后点击上方下载按钮下载查看