html动态进度条代码_进度条滚动效果Css3

最新推荐文章于 2024-08-07 17:37:46 发布

科技星辰

最新推荐文章于 2024-08-07 17:37:46 发布

阅读量1.9k

点赞数 1

文章标签： html动态进度条代码

本文链接：https://blog.csdn.net/weixin_30277297/article/details/113077687

版权

本文介绍了如何使用Css3创建动态进度条，通过给div设置框框并填充渐变色，通过线性渐变和角度调整实现条纹效果。在调试过程中可能会遇到周期不完整的问题，需要确保background-size对应完整周期，以实现正确效果。

摘要由CSDN通过智能技术生成

效果：

Css3实现进度条展示效果https://www.zhihu.com/video/1184507155678535680

关键字：linear-gradient

第一步：需要给一个div的框框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        .bar {
            margin: 10% auto;
            width: 50%;
            /*为了更方便展示原理 这里的高度暂时设置的稍微高一点*/
            height: 60px;
            border: 1px #000 solid;
            /*为了美观给一个圆角*/
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div class="bar"></div>
</body>
</html>

一无所有的状态

第二步：填充渐变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        .bar {
            margin: 10% auto;
            width: 50%;
            /*为了更方便展示原理 这里的高度暂时设置的稍微高一点*/
            height: 60px;
            border: 1px #000 solid;
            /*为了美观给一个圆角*/
            border-radius: 20px;
            /*渐变填充色*/
            background: linear-gradient(0deg, #39af4e, #1b39af);
        }
    </style>
</head>
<body>
    <div class="bar"></div>
</body>
</html>

进度实现的实际效果是多个条纹叠加，然后倾斜一定的角度实现的，站在调试的角度演示一下：

调试状态https://www.zhihu.com/video/1184513177374588928

侧翻一定的角度展示的效果就和下面的这个图片一样了

多半情况下我们都会翻车。。。。。。。。。

这个时候要分析是不是自己设置得像素的尺寸出现了问题，为了更直观调试出我们最终需要展示的效果，我这里上传了一个效果渐变的调试过程：

调试效果展示https://www.zhihu.com/video/1184517571230982144

最后我们只要来个神奇的循环位置移动即可实现简单的额进度效果（实在不敢说专业，拿得出手还要手动调试一波色彩）

@-webkit-keyframes BAR {
            from {
                background-position: 0px 0px;
            }
            to {
                background-position: -20px 0px;
            }
        }
        @keyframes BAR {
            from {
                background-position: 0px 0px;
            }
            to {
                background-position: -20px 0px;
            }
        }

你以为这样就结束了，然而多半还是会翻车，比如下面这种情况