CSS3实现的闪烁跳跃进度条示例(附源码)

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

三、CSS样式

接下来，给这个进度条容器添加CSS样式，实现进度条的闪烁跳跃效果。具体代码如下：

.progress-bar {
  width: 500px;
  height: 30px;
  background-color: #f6f6f6;
  position: relative;
  overflow: hidden;
}

.progress-bar:before {
  content: "";
  background-color: #f1c40f;
  width: 0%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: progress 2.5s ease-in-out infinite;
}

@keyframes progress {
  0% {
    width: 0;
    opacity: 0.3;
  }

  50% {
    width: 100%;
    opacity: 1;
  }

  100% {
    width: 0;
    opacity: 0.3;
  }
}

上面的代码中，我们使用:before伪元素来模拟进度条的滑块，然后使用动画特性来实现滑块的闪烁跳跃效果。关键的动画代码如下：

@keyframes progress {
  0% {
    width: 0;
    opacity: 0.3;
  }

  50% {
    width: 100%;
    opacity: 1;
  }

  100% {
    width: 0;
    opacity: 0.3;
  }
}

上面的progress动画有三个关键帧，分别是0%、50%和100%。在0%和100%的时候，滑块的宽度为0，同时不透明度为0.3；在50%的时候，滑块的宽度为100%，同时不透明度为1。通过这样的动画设置，就可以实现进度条的闪烁跳跃效果了。

四、JavaScript控制进度

最后，我们需要使用JavaScript来控制进度。具体代码如下：

var progressBar = document.querySelector(".progress-bar:before");
var progressWidth = 0;

function setProgress() {
  if (progressWidth <= 100) {
    progressBar.style.width = progressWidth + "%";
    progressWidth++;
    setTimeout(setProgress, 50);
  }
}

setProgress();

上面的代码中，我们通过document.querySelector()方法来获取进度条容器中的伪元素:before，然后定义一个进度变量progressWidth，初始值为0。在setProgress()函数中，我们通过控制伪元素:before的宽度和progressWidth变量来实现进度条的动态控制。最后通过setTimeout()函数来控制进度的更新频率。

五、案例说明

上面的代码实现了一个完整的CSS3闪烁跳跃进度条，下面我会通过两个示例解释其应用场景：

1. 网络请求进度

在进行网络请求时，通常需要显示一个进度条，来提示用户请求的进度和状态。通过这种CSS3实现的闪烁跳跃进度条，可以让进度条动态、流畅地呈现请求的进度和状态，给用户更好的使用体验和反馈。

1. 响应式设计

在响应式设计中，需要对不同的屏幕大小和设备进行适配，同时需要利用进度条等UI元素来提示用户进行交互。通过这种CSS3实现的闪烁跳跃进度条，可以让进度条更加美观、实用，在响应式设计中起到更好的用户引导作用。

以上就是CSS3实现的闪烁跳跃进度条示例的完整攻略，希望对您有所帮助！