如何用html+css做进度条？

最新推荐文章于 2024-09-03 03:15:58 发布

露露啊8080

最新推荐文章于 2024-09-03 03:15:58 发布

阅读量2.4k

点赞数 2

分类专栏：前端html+css

本文链接：https://blog.csdn.net/qq_41468453/article/details/89058911

版权

本文介绍了如何使用HTML和CSS来制作一个动态的进度条。通过创建一个包含子元素的div，设置适当的宽高样式，然后利用CSS的动画属性，使子元素的宽度变为父元素的两倍并定位，实现进度条不断移动的效果。

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

1、首先建一div,div里再套一个div,并设置它们的宽高样式。

Title

< style>

* {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #box{
        width: 200px;
        height: 30px;
        margin: 20px auto;
        border: 1px solid #000;
    }
    #box div{
        width: 100%;
        height: 30px;
        background:repeating-linear-gradient(-45deg,red 0px,red 10px,blue 10px,blue 20px) ;

<div id="box">
    <div></div>
</div>

效果如图所示：

在这里插入图片描述
2.接着要显示它运动效果，将进度条宽度设为父级的2倍，依照父级定位，位置定位向左移动一半，并将动画次数设为无限，这样就能看见进度条一直在父级里移动了
#box{
overflow: hidden;
width: 200px;
height: 30px;
margin: 20px auto;
border: 1px solid #000;
position: relative;
}