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

代码语言：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;
      height: 20%;
      min-height: 14rem;
      right: 25%;
      bottom: -2rem;
    }
    
    @keyframes float {
      from, to {
        translate: 0% 0%;
      }
      
      50% {
        translate: 0% 10%;
      }
    }
    
    #shapes > i {
      position: absolute;
      color: white;
      opacity: 0.1;
      animation: float 6000ms infinite;
      color: rgb(var(--theme-rgb));
    }
    
    #shapes > i.fa-circle {
      font-size: 3rem;
      left: 16%;
      top: 4%;
    }
    
    #shapes > i.fa-triangle {
      font-size: 8rem;
      right: 8%;
      top: 16%;
      rotate: 4deg;
      animation-delay: -2000ms;
    }
    
    #shapes > i.fa-square {
      font-size: 4rem;
      left: 32%;
      bottom: 16%;
      rotate: -2deg;
      animation-delay: -4000ms;
    }
    
    #prize {
      width: 88rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      position: relative;
      z-index: 2;
      background-color: rgb(var(--darker-rgb));
      border: 1.5rem solid rgb(255 255 255 / 2.5%);
      padding: 10rem 4rem;  
      box-shadow: 0rem 0rem 10rem 4rem rgb(0 0 0 / 75%);
      backdrop-filter: blur(1rem);
    }
    
    #prize-label,
    #prize-text {
      color: rgb(var(--theme-rgb));
      text-align: center;
    }
    
    #prize-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      font-size: 3rem;
      opacity: 0.75;
    }
    
    #prize-label > span {
      display: inline-flex; 
    }
    
    #prize-label > .asterisk {
      padding-top: 0.25em;
      line-height: 0.5em;
    }
    
    #prize-text {  
      display: flex;
      gap: 1rem;
      height: 10rem;
      line-height: 10rem;
      font-size: 11rem;
    }
    
    #prize-text > .digit {  
      width: 8rem;
      position: relative;
      overflow: hidden;
      border-bottom: 0.25rem solid rgb(var(--theme-rgb));
    }
    
    #prize-text > .digit > .digit-track {  
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute; 
      left: 0%;
      top: 0%;
      translate: 0% 0%;
      transition: translate 3000ms cubic-bezier(.1,.67,0,1);
    }
    
    .prize-filter {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0%;
      top: 0%;
      pointer-events: none;
    }
    
    @keyframes pan-lines {
      from {
        background-position: 0% 0%;
      }
      
      to {
        background-position: 0% -100%;
      }
    }
    
    #prize-lines {
      background: linear-gradient(
        rgb(var(--darker-rgb) / 15%) 0%,
        rgb(var(--darker-rgb) / 75%) 28%,
        rgb(var(--darker-rgb) / 15%) 56%,
        rgb(var(--darker-rgb) / 5%) 56%,
        rgb(var(--darker-rgb) / 5%) 100%
      );
      background-size: 100% 7px;
      z-index: 2;
      animation: pan-lines 360s infinite linear;
    }
    
    #prize-shadow {
      background: radial-gradient(
        rgb(var(--theme-rgb) / 1%) 20%, 
        rgb(var(--darker-rgb) / 80%) 70%
      );
      z-index: 3;
    }
    
    #actions-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      position: fixed;
      bottom: 2rem;
      z-index: 10;
    }
    
    #actions {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 1rem;
      background-color: rgb(0 0 0 / 50%);
      border: 1px solid rgb(255 255 255 / 5%);
      border-radius: 0.5rem;
      backdrop-filter: blur(1rem);
    }
    
    #actions button {
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0rem 1.5rem;
      background-color: rgb(255 255 255 / 5%);  
      border-radius: 0.25rem;
      border: 1px solid rgb(255 255 255 / 5%);
      color: white;
      font-size: 0.8rem;
      text-transform: uppercase;
      outline: none;
      cursor: pointer;
    }
    
    #actions button:is(:hover, :focus-visible) {
      background-color: rgb(255 255 255 / 7%);
    }
    
    #actions button:focus-visible {
      border-color: rgb(255 255 255 / 15%);
    }
    
    #redo-button > i {  
      p.........完整代码请登录后点击上方下载按钮下载查看