CSS 3.0实现的加载背景动画（骨架屏）

越陌度阡

发布于 2020-11-26 14:54:09

7590

发布于 2020-11-26 14:54:09

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 3.0实现的加载背景动画（骨架屏）</title>
    <style>

        .is-loading {
            /* 宽度和高度根据要展示元素大小设定 */
            width: 500px;
            height: 500px;
            position: relative;
            margin: 0 auto;
            top:100px;

            /* 以下代码实现背景动画效果 */
            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%
            }
        }
    </style>
</head>

<body>
    <div class="is-loading"></div>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/09/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

动画