css3 进度条

来源：参考 bootstrap

效果图：

、

code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style type="text/css">
        .progress {
            height: 20px;
            margin-bottom: 20px;
            overflow: hidden;
            background-color: #f5f5f5;
            border-radius: 4px;
            box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        }
        .progress-bar{
            animation: progress-bar-stripes 2s linear infinite;
            background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            background-size: 40px 40px;
        }

        .progress-bar {
            height: 100%;
            color: #fff;
            background-color: #5cb85c;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
            transition: width .6s ease;
        }

        @keyframes progress-bar-stripes {
          from  { background-position: 40px 0; }
          to    { background-position: 0 0; }
        }
    </style>
</head>
<body>
    <div class="progress">
        <div class="progress-bar"  style="width: 40%;"></div>
    </div>
</body>
</html>

知识点：animation ，transition

posted @ 2019-01-11 11:01  s_p  阅读(220)  评论(0)  编辑  收藏  举报