纯css3实现动态加载条

最新推荐文章于 2025-01-29 10:46:22 发布

Mr.王征

最新推荐文章于 2025-01-29 10:46:22 发布

阅读量669

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css3动画

本文链接：https://blog.youkuaiyun.com/wangzhneg123/article/details/88106405

CSS 专栏收录该内容

32 篇文章

订阅专栏

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯css3实现动态加载条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1000px;
            height: 100px;
            margin: 80px auto;
            transition: all .5s linear;
            animation: animate 0.5s linear infinite;
            background-size: 100px 100px;
            background-image: linear-gradient(135deg, #fff, #fff 25%, black 25%, black 50%, #fff 50%, #fff 75%, black 75%, black 100%);
        }
        @keyframes animate {
            0%{}
            100%{
             background-position: 100px 0;
            }
        }

    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>