css实现宽度自适应的波浪线（动态、静态波浪线）

CSS可以用来创建动态或静态的宽度自适应波浪线。以下是一个简单的CSS实现方法：

静态波浪线：

<div class="wave-static"></div>

.wave-static {
  width: 100%;
  height: 20px;
  background: linear-gradient(45deg, transparent 10%, #999 10%, #999 40%, transparent 40%);
  background-size: 200% 200%;
  animation: static-wave 5s linear infinite;
}
 
@keyframes static-wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200% 0;
  }
}

动态波浪线：

<div class="wave-dynamic"></div>

.wave-dynamic {
  position: relative;
  width: 100%;
  height: 20px;
  overflow: hidden;
}
 
.wave-dynamic::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(45deg, transparent 10%, #999 10%, #999 40%, transparent 40%);
  background-size: 200% 200%;
  animation: dynamic-wave 5s linear infinite;
}
 
@keyframes dynamic-wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

以上代码中，.wave-static 类创建了一个静态的波浪线，它会在固定的周期内循环移动。.wave-dynamic 类创建了一个动态的波浪线，它会无限期地向左移动，看起来就像波浪一样。通过调整animation属性中的时长和background-size，你可以控制波浪的速度和大小。