css3 进度条

最新推荐文章于 2024-06-26 18:40:25 发布

转载最新推荐文章于 2024-06-26 18:40:25 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/y112102/p/10254050.html

本文详细介绍了一个使用HTML、CSS实现的进度条动画案例，通过animation属性实现了背景条纹滚动效果，利用transition属性平滑过渡宽度变化，展示了如何在网页中创建动态视觉效果。

来源：参考 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>