css 斑马色进度条

CSS 斑马色进度条是一种常见的网页效果，可以为页面加入时尚感和美观性，同时还能够提供用户友好的体验。本文将介绍如何使用 CSS 实现斑马色进度条效果。

.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #ddd;
  position: relative;
}

.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #2b2d42;
  transition: width 0.5s ease-in-out;
}

.progress-bar.percent50::after {
  width: 50%;
}

首先，我们需要设置进度条的基本样式。我们使用一个 div 元素来作为进度条的容器，设置其宽度和高度、背景颜色以及定位属性。

.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #ddd;
  position: relative;
}

接着，我们在这个 div 元素的伪元素中添加一个背景色为斑马色的元素作为进度条的显示部分。我们使用 ::after 伪元素来添加该元素，并设置其宽度为 0，高度为 100%，并对它应用一个过渡效果，使它能够平滑地展示出来。

.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #2b2d42;
  transition: width 0.5s ease-in-out;
}

最后，通过为进度条的容器添加一个自定义的 class，我们就可以控制进度条的进度了。这里我们以 percent50 为例，设置其进度为 50%，并在伪元素的宽度属性中体现出来。

.progress-bar.percent50::after {
  width: 50%;
}

在使用 CSS 斑马色进度条时，可以根据需要主动改变进度值来展示不同的进度状态，使页面更加实用且美观。