js实现文字散落loading加载动画效果代码-html代码-BFW代码库

js实现文字散落loading加载动画效果代码

代码语言：html

代码描述：js实现文字散落loading加载动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @font-face {
          font-family: "Plex Sans VF";
          src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2") format("woff2-variations");
          font-weight: 100 700;
          font-stretch: 85% 100%;
          font-display: swap;
        }
        :root {
          font-family: "Plex Sans VF", Arial, sans-serif;
        }
        
        .t {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 2rem;
          font-weight: 100;
          text-transform: uppercase;
          --t: 2.5s;
          --r: 8.5rem;
        }
        
        .t i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotate(calc(var(--i) * 360deg)) translateY(calc(-1 * var(--r))) rotate(calc(var(--i) * -360deg));
        }
        
        .t b {
          display: block;
          -webkit-animation: show var(--t) infinite forwards ease-in-out;
                  animation: show var(--t) infinite forwards ease-in-out;
          -webkit-animation-delay: calc((-1 * var(--t)) * (1 - var(--i)));
                  animation-delay: calc((-1 * var(--t)) * (1 - var(--i)));
        }
        
        @-webkit-ke.........完整代码请登录后点击上方下载按钮下载查看