loading文字拆分加载动画效果代码-html代码-BFW代码库

loading文字拆分加载动画效果代码

代码语言：html

代码描述：loading文字拆分加载动画效果代码

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

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

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap'>

    <style>
        .loading {
            --color: #F5F9FF;
            --duration: 2000ms;
            font-family: Roboto,Arial;
            font-size: 24px;
            position: relative;
            white-space: nowrap;
            user-select: none;
            color: var(--color);
        }
        .loading span {
            --x: 0;
            --y: 0;
            --move-y: 0;
            --move-y-s: 0;
            --delay: 0ms;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            text-indent: calc(var(--x) *-1);
            overflow: hidden;
            transform: translate(var(--x), var(--y));
        }
        .loading.start div {
            opacity: 0;
        }
        .loading.start span {
            animation: move   var(--duration) ease-in-out var(--delay);
        }

@keyframes move {
            30% {
                transform: translate(var(--x), var(--move-y));
            }
            82% {
                transform: translate(var(--x), var(--move-y-s));
            }
        }
        html {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        * {
            box-sizing: inherit;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #151924;
        }
        body .dribbble {
            position: fixed;
            display: block;
            right: 20px;
            bottom: 20px;
        }
        body .dribbble img {
            display: block;
            height: 28px;
        }
    </style>



</head>

<body>
    <div class="loading">
        Loading
    </div>

    <script type="text/javascript&quo.........完整代码请登录后点击上方下载按钮下载查看