css tab动画边框进度条

CSS 是网页开发中必不可少的一部分，它可以帮助我们实现许多炫酷的效果，比如 Tab 切换和边框进度条。在这里，我们将介绍如何使用 CSS 实现这两个效果。

/* Tab 切换 */
.tab {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

.tab button {
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: bold;
  background-color: transparent;
  cursor: pointer;
}

.tab button:hover {
  color: blue;
}

.tab button.active {
  color: red;
  border-bottom: 2px solid red;
}


/* 边框进度条 */
.progress {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background-color: #ccc;
}

.progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 5px;
  background-color: #f00;
  animation: progress 5s linear;
}

@keyframes progress {
  0% {width:0%}
  100% {width:100%}
}

在上面的代码中，我们首先定义了一个 Tab 控件和一个进度条。在 Tab 控件中，我们使用 flex 布局使按钮水平分布并居中。当悬停时，按钮文字将变为蓝色，并在点击时添加一个红色的带下划线的样式，表示该选项卡是活动的。在进度条的样式中，我们使用了动画（animation）属性来控制进度条在5秒内从0%增长到100%。这是我们使用 CSS 完成 Tab 切换和边框进度条的方法。希望这篇文章能够对您有所帮助！