CSS 3.0实现的加载背景动画

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_40629244/article/details/101426996

在做数据据请求时，通常会为要展示的某条数据设置一个加载中的背景动画，以达到更好的用户体验，下面给大家分享一段代码实现这个效果，欢迎大家复制粘贴及吐槽。

.is-loading {
    /* 宽度和高度根据要展示元素大小设定 */
    width: 500px;
    height: 500px;
    /* 以下代码实现背景动画效果 */
    animation: loading 1.4s ease infinite;
    -webkit-animation: loading 1.4s ease infinite;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(25%, #f0f0f0), color-stop(37%, #e3e3e3), color-stop(63%, #f0f0f0));
    background-image: -o-linear-gradient(left, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e3e3e3 37%, #f0f0f0 63%);
    background-size: 400% 100%
}
@-webkit-keyframes loading {
    0% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

@keyframes loading {
    0% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}