通过css实现从左到右的扫光动画效果，可以用在进度条上，让进度条更加酷炫。

动画效果

代码

<div class="xiaoguo">
    <span>测试</span>
</div>
<style>
    .xiaoguo {
        float: left;
        padding: 2px 4px 0 6px;
        margin: 1px 0;
        background-color: #2e82f8;
        background-image: linear-gradient(to right, #2e82f8, #156de8 10%, lightskyblue 50%, #156de8 80%, #2e82f8 100%);
        background-image: -moz-linear-gradient(to right, #2e82f8, #156de8 10%, lightskyblue 50%, #156de8 80%, #2e82f8);
        background-image: -webkit-linear-gradient(to right, #2e82f8, #156de8 10%, lightskyblue 50%, #156de8 80%, #2e82f8);
        background-size: 200% 100%;
        -webkit-animation: masked-animation 2.5s infinite linear;
        animation: masked-animation 2.5s infinite linear;
        width: 50%;
        min-width: 21%;
        border-radius: 2px;
        white-space: nowrap;
        color: #fff;
    }

    @keyframes masked-animation {
        0% {
            background-position: 100% 0;
        }
        50% {
            background-position: 0 0;
        }
        100% {
            background-position: -100%, 0;
        }
    }
</style>