[分享]css3按钮进度条

CSS3按钮进度条在web开发中有着广泛的应用，可以使按钮在被点击后显示出一个进度条，让用户了解当前的操作进度。下面我将介绍如何实现一个简单的CSS3按钮进度条。/ CSS代码 / .btn { di...

CSS3按钮进度条在web开发中有着广泛的应用，可以使按钮在被点击后显示出一个进度条，让用户了解当前的操作进度。下面我将介绍如何实现一个简单的CSS3按钮进度条。

/* CSS代码 */
.btn {
  display: inline-block;
  position: relative;
  padding: 12px 24px;
  color: #fff;
  background-color: #4172cb;
  border-radius: 4px;
  transition: background-color 0.2s ease-in-out;
  text-align: center;
  cursor: pointer;
}

.btn:active {
  background-color: #31509c;
}

.btn.progress:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, .2);
  border-radius: 4px;
  transition: width 1s ease-in-out;
}

.btn.progress.active:after {
  width: 100%;
} 

以上是CSS代码。我们控制按钮的背景色在按钮被点击后变化，进度条使用伪元素after动态地改变宽度。

接下来是HTML代码，我们需要在按钮上添加一个class="progress"，用JS控制class的添加和删除，实现进度条效果。

<!-- HTML代码 -->
<button class="btn progress" onclick="showProgress()">点我显示进度条</button>

<script>
function showProgress() {
  var btn = document.querySelector(".btn.progress");
  btn.classList.add("active");
  setTimeout(function() {
    btn.classList.remove("active");
  }, 3000); // 假设操作需要3秒钟完成
}
</script> 

以上是JavaScript代码。我们使用setTimeoout函数模拟操作需要一段时间才能完成的情况，当操作完成时，我们移除按钮上的class="active"，进度条就会消失了。

通过以上代码，我们就可以实现一个简单的CSS3按钮进度条了，这样的效果可以让用户了解操作的进度，提高用户体验。