简单实现一个数据未加载前的动画-优快云博客

博客分享了Google旗下YouTube的iOS端相关效果，作者表示不废话直接上代码，还提到掘金似乎也有相关内容，最后给出了转载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看一下效果

不废话了，直接上代码

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test {
            width: 400px;
            height: 20px;
            text-align: center;
            margin-bottom: 20px;
        }

        #gradent {
            background: -webkit-gradient(linear, left top, right top,
                        color-stop(0, #bdbdbd),
                        color-stop(.3, #c3c3c3),
                        color-stop(.5, #fff),
                        color-stop(.7, #c3c3c3),
                        color-stop(1, #bdbdbd));
            -webkit-animation: slidetounlock 1s infinite;
            line-height: 20px;
            display: inline-block;
            width: 100%;
        }

        @keyframes slidetounlock {
            0% {
                background-position: -200px 0
            }

            100% {
                background-position: 200px 0
            }
        }
    </style>
</head>

<body>
    <div class="test">
        <span id="gradent"> &nbsp; </span>
    </div>
    <div class="test">
        <span id="gradent"> &nbsp; </span>
    </div>
    <div class="test">
        <span id="gradent"> &nbsp; </span>
    </div>
    <div class="test">
        <span id="gradent"> &nbsp; </span>
    </div>

</body>

</html>
复制代码