怎么利用CSS实现波浪进度条效果

1. 引言

在Web开发中，进度条一直是一个非常实用的组件，能够让用户了解当前操作的进度，提高用户体验。因此，很多项目中都有使用进度条的需求，而波浪进度条则更加美观，越来越受到开发者的喜爱。本文将简单介绍如何使用CSS实现波浪进度条效果。

2. 实现思路

波浪进度条的实现可分为两个部分：

实现波浪效果；

根据进度调整波浪的高度。

因此，我们需要使用CSS中的动画效果和变量（Variable）来完成进度条的实现。

3. 实现步骤

3.1 实现波浪效果

首先，我们需要定义一个波浪的波形，可以使用正弦函数实现。定义sin(x)为：求正弦函数

  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 255, 0.2);
    z-index: -1; /* 使波浪在进度条的下方 */
    animation: wave 2s infinite linear; /* 实现波浪动画 */
  }
  @keyframes wave {
    0% {
      transform: translateX(0px) translateY(0px);
    }
    100% {
      transform: translateX(-800px) translateY(0px);
    }
  }

上述代码中，我们定义了一个类为.wave的元素，使用position:absolute属性使其相对于父元素定位。定义波浪的颜色为rgba(0,0,255,0.2)，表示蓝色透明度为0.2的效果，这里使用rgba颜色值可以表现波浪的透明感。在z-index属性中将波浪的层级调低，使它在进度条下层。最后通过animation属性实现波浪的动画效果。

接下来，我们使用伪元素:before和:after来创建两条波浪，实现波浪的效果。

  .wave:before,
  .wave:after {
    content: "";
    display: block;
    position: absolute;
    width: 210%;
    height: 150%;
    top: 0;
    left: -50%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 50% 100%;
  }
  .wave:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M -1 0 Q -0.5 1 0 0 Q 0.5 -1 1 0 Q 1.5 1 2 0' stroke='rgba(255, 255, 255, 0.2)' stroke-width='0.02' fill-opacity='0'/%3E%3C/svg%3E");
    transform: rotateY(180deg);
    opacity: 0.5;
  }
  .wave:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M -1 0 Q -0.5 1 0 0 Q 0.5 -1 1 0 Q 1.5 1 2 0' stroke='rgba(255, 255, 255, 0.2)' stroke-width='0.02' fill-opacity='0'/%3E%3C/svg%3E");
    opacity: 0.5;
  }

上述代码中，我们使用伪元素:before和:after来分别对应波浪的上部和下部。通过background-image设置波浪的背景图案，background-size设置波浪的背景大小。同时，使用transform:rotateY(180deg)将上部的波浪旋转180度，实现波浪的对称效果。

最后，我们将波浪的opacity设置为0.5，使其有一定的透明度，形成比较柔和的视觉效果。

3.2 根据进度调整波浪的高度

接下来，我们需要根据进度来调整波浪的高度。我们可以使用CSS Variable的方法来实现。在进度条的父元素中定义变量--progress，并将其初始值设为0。

  .progress {
    --progress: 0; /* 初始值设为0 */
  }

接下来，我们需要通过JavaScript来动态地改变进度条的值。这里使用一个方法来模拟改变进度条的方法。在JavaScript中，首先获取到进度条的父元素，然后通过循环不断改变变量的值，同时将改变后的变量值赋给span中显示的值，实现进度条的效果。

  const progressBar = document.querySelector(".progress");
  const progressValue = document.querySelector(".progress-value");
  function simulateProgress() {
    for (let i = 0; i <= 100; i++) {
      setTimeout(() => {
        progressBar.style.setProperty("--progress", `${i / 100}`);
        progressValue.innerHTML = `${i}%`;
      }, i * 10);
    }
  }
  simulateProgress();

上述代码中，我们通过querySelector获取到进度条的父元素和显示进度的span元素。使用simulateProgress()函数来模拟进度条的改变。函数中使用循环遍历将变量值依次改变（从0到1），并使用setTimeout设定每次改变的延迟时间。将改变后的值赋给变量，同时在span元素中显示出来，实现进度条的效果。

在CSS中，我们使用变量--progress的值来改变波浪的高度。在下面的代码中，我们使用calc()函数来计算波浪的高度，其计算方法为波浪的最大高度20px与波浪的当前高度相乘，即：calc(20px * var(--progress))。这样，波浪的高度就会随着进度条的变化而变化。

  .wave:before,
  .wave:after {
    ...
    transform: translate3d(0, calc(20px * var(--progress)), 0);
  }

4. 分享代码

最终的代码如下：

  <div class="progress">
    <div class="wave"></div>
    <div class="progress-value"></div>
  </div>

  .progress {
    position: relative;
    width: 300px;
    height: 20px;
    margin: 50px auto;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    --progress: 0;
  }
  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 255, 0.2);
    z-index: -1;
    animation: wave 2s infinite linear;
    &:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 210%;
      height: 150%;
      top: 0;
      left: -50%;
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: 50% 100%;
      transform: translate3d(0, calc(20px * var(--progress)), 0);
    }
    &:before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M -1 0 Q -0.5 1 0 0 Q 0.5 -1 1 0 Q 1.5 1 2 0' stroke='rgba(255, 255, 255, 0.2)' stroke-width='0.02' fill-opacity='0'/%3E%3C/svg%3E");
      transform: rotateY(180deg);
      opacity: 0.5;
    }
    &:after {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 2 1' preserveAspectRatio='none'%3E%3Cpath d='M -1 0 Q -0.5 1 0 0 Q 0.5 -1 1 0 Q 1.5 1 2 0' stroke='rgba(255, 255, 255, 0.2)' stroke-width='0.02' fill-opacity='0'/%3E%3C/svg%3E");
      opacity: 0.5;
    }
  }
  @keyframes wave {
    0% {
      transform: translateX(0px) translateY(0px);
    }
    100% {
      transform: translateX(-800px) translateY(0px);
    }
  }
  .progress-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }

实际效果如下：

5. 总结

本文介绍了如何使用CSS实现波浪进度条效果。我们使用伪元素:before和:after来分别实现波浪的上部和下部，使用CSS Variable来动态地调整波浪的高度。同时，我们使用JavaScript模拟了进度条的变化过程，通过改变CSS Variable的值来改变波浪的高度，最终实现了一个漂亮的波浪进度条效果。