使用 CSS 制作带圆点的进度条需要掌握以下几个关键步骤：
- 首先，我们需要创建一个带有圆点的无序列表（
- ），用于表示进度条上的各个阶段。每个圆点可以使用伪元素 (::before 或 ::after) 来创建，例如：
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
position: relative;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
margin-right: 10px;
}
li::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}- 接下来，我们需要创建一个表示进度的容器（），用于显示当前进度。进度条的背景和当前进度的颜色可以使用线性渐变来实现，例如：
.progress { height: 10px; background-color: #ccc; margin-top: 20px; position: relative; } .progress::before { content: ""; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to right, #ff0000, #ffff00, #00ff00); width: 50%; z-index: -1; }- 最后，我们需要使用 JavaScript 来动态地更新进度条的宽度，例如：
const progressBar = document.querySelector(".progress"); function updateProgress(percent) { progressBar.style.width = percent + "%"; } // 示例调用 updateProgress(50);这样就可以实现一个简单的带圆点的进度条了。需要注意的是，以上代码仅为示例，实际使用时可能需要根据具体需求进行调整和优化。
2023-05-11 11:30:41 更新
相关推荐
其他工具