御风痕站长前端技术分享 2019-04-02

纯css3实现动态加载条

效果展示:

源码展示：

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

与御风痕博客园,程序员博客园地的首选!
御风痕博客园 » 纯css3实现动态加载条