[分享]css做一个进度条动画效果

CSS是一种样式表语言，可以用来控制网页的外观和布局。其中，动画效果是有助于提高用户体验的重要因素，而进度条动画效果是其中一种常用的动画效果。在这篇文章中，我们会介绍如何使用CSS来做出一个简单的进度...

CSS是一种样式表语言，可以用来控制网页的外观和布局。其中，动画效果是有助于提高用户体验的重要因素，而进度条动画效果是其中一种常用的动画效果。在这篇文章中，我们会介绍如何使用CSS来做出一个简单的进度条动画效果。

<div class="progress-bar"></div> 

上述代码，我们定义了一个class为progress-bar的div元素来表示进度条。接下来，我们在CSS样式表中为其添加样式。

.progress-bar {
  width: 100%; /* 进度条长度 */
  height: 20px; /* 进度条高度 */
  background-color: #eee; /* 进度条底色 */
  border-radius: 10px; /* 进度条圆角 */
  position: relative; /* 相对定位 */
  overflow: hidden; /* 隐藏进度条宽度之外的内容 */
}

.progress-bar::before {
  content: ""; /* 伪元素添加进度条颜色 */
  display: block; /* 块级元素 */
  height: 100%; /* 进度条高度 */
  background-color: #2196F3; /* 进度条颜色 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 距离父元素顶部距离为0 */
  left: 0; /* 距离父元素左侧距离为0 */
  width: 0%; /* 进度为0 */
  transition: width 1s ease-in-out; /* 动画过渡 */
  z-index: -1; /* 使进度条在底部 */
} 

上述代码中，我们给progress-bar元素和它的:before伪元素分别添加了样式。其中，progress-bar元素作为进度条的底部部分。我们使用了overflow属性隐藏了进度条宽度之外的内容，这可以避免进度超出条的宽度而影响样式。:before伪元素则表示进度条的颜色部分。我们通过left和top属性调整它的位置，并设置宽度为0，同时为了达到动画过渡的效果，设置transition属性，使它能够在一定时间段内从0开始逐渐增加宽度。

最后，我们在JavaScript中修改:before元素的宽度，模拟进度的变化。代码如下：

function move() {
  const elem = document.querySelector(".progress-bar::before");
  let width = 0;
  const id = setInterval(frame, 10);
  function frame() {
    if (width === 100) {
      clearInterval(id);
    } else {
      width ++;
      elem.style.width = width + "%";
    }
  }
} 

通过调用move()函数，可以让进度条开始自动增长，直到进度为100%为止。最终的效果是一个简单美观的进度条动画。