HTML css 波浪线动画效果

HTML 和 CSS 结合可以创建出各种动态效果，包括波浪线动画。这种效果通常通过CSS关键帧动画（@keyframes）和`animation`属性来实现。以下是基本步骤：

1. **创建关键帧**：
首先，在CSS文件中定义一个名为`wave`的关键帧动画，设置从左到右（或反之）的波纹移动路径，比如从0%开始位置为0，然后逐渐向右移动直到100%，形成一个往返的波浪。

@keyframes wave {
  0% { transform: translateX(0); }
  50% { transform: translateX(-50px); }
  100% { transform: translateX(0); }
}

2. **应用动画**：
接下来，给需要动画效果的元素添加这个动画，并指定动画周期、持续时间和重复次数（如果需要的话）。例如：

.your-element {
  animation-name: wave;
  animation-duration: 1s;
  animation-iteration-count: infinite; /* 可选，让动画无限循环 */
}

3. **调整样式**：
根据需要，你可以改变波浪的颜色、宽度、高度等属性，甚至结合其他CSS技巧如伪元素 (`::before` 或 `::after`) 来增强视觉效果。