简单实现一个数据未加载前的动画个人第一次看见是在Google旗下yootube 的ios端，好像掘金也有了，嗯，自己玩一

先来看一下效果

不废话了，直接上代码

<!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>

个人第一次看见是在Google旗下yootube 的ios端，好像掘金也有了，嗯，自己玩一下。