当前位置：首页 > CSS

css制作波浪线

2026-04-01 22:21:56CSS

使用 `linear-gradient` 和 `background-size` 制作波浪线

通过 CSS 的 linear-gradient 和 background-size 可以创建重复的波浪线效果。设置背景为渐变色，并通过调整尺寸控制波浪线的密度。

.wave-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, transparent 50%, #000 50%, #000);
  background-size: 10px 2px;
}

使用 SVG 内联背景

SVG 可以精确控制波浪线的形状和曲线。将 SVG 作为内联背景图像，通过 background-repeat 实现重复效果。

css制作波浪线

.wave-svg {
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5 Q5 0 10 5 T20 5' stroke='%23000' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

通过伪元素和 `border-radius` 模拟波浪

利用伪元素和 border-radius 创建弧形边框，组合成波浪线。调整 border-radius 的数值可以改变波浪的幅度。

css制作波浪线

.wave-pseudo {
  position: relative;
  height: 20px;
}
.wave-pseudo::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #000;
}

使用 `clip-path` 裁剪路径

通过 clip-path 和 CSS 路径函数直接定义波浪形状。这种方法适合需要复杂波浪效果的场景。

.wave-clip {
  height: 20px;
  background: #000;
  clip-path: path('M0 10 C10 20 30 0 40 10 S70 20 80 10');
}

结合动画实现动态波浪

为静态波浪线添加动画，通过关键帧改变背景位置或路径参数，实现动态效果。

@keyframes wave {
  0% { background-position-x: 0; }
  100% { background-position-x: 20px; }
}
.animated-wave {
  height: 10px;
  background: linear-gradient(90deg, #000, #000 50%, transparent 50%);
  background-size: 20px 10px;
  animation: wave 1s linear infinite;
}