Question

我正在尝试创建一个进度条，以指示网站上的一些虚拟统计数据。进度条的值是硬编码的。我已经成功创建了这样的进度条

.progress .progress-bar {
  box-shadow: none;
  position: relative;
  border-radius: 20px;
  animation: animate-positive 1s;
}

@keyframes animate-positive {
  0% {
    width: 0;
  }
}

<div class="progress">
  <div class="progress-bar" style="width: 60%; background: goldenrod;">
    <h3 class="progress-title">Happy Clients</h3>
    <div class="progress-value">60+</div>
  </div>
</div>

我的问题是，这只会在页面加载时进行动画处理，并且必须刷新页面才能再次查看它。仅当该部分可见时，我是否有办法制作动画？

Answer 1

我希望这是您要寻找的东西：

.progress .progress-bar {
  box-shadow: none;
  position: relative;
  border-radius: 20px;
  animation: animate-positive 1.5s ease 0s alternate infinite none running;
}
.progress-title{
  white-space:nowrap;
}

@keyframes animate-positive {
  0% {
    width: 0;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}

<div class="progress">
  <div class="progress-bar" style="width: 60%; background: goldenrod;">
    <h3 class="progress-title">Happy Clients</h3>
    <div class="progress-value">60+</div>

  </div>
</div>

对进度条进行动画处理而无需刷新网页

1 个答案: