[分享]css中波浪线怎么画

CSS中波浪线的绘制可以通过伪元素和贝塞尔曲线来实现。

.wave {
  position: relative;
  height: 200px;
  width: 100%;
}

.wave:before, .wave:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background: #fff;
  z-index: 1;
}

.wave:before {
  background: linear-gradient(to bottom, #fff, transparent);
}

.wave:after {
  background: linear-gradient(to bottom, transparent, #fff);
}

.wave:before {
  border-radius: 0 0 50% 50%;
}

.wave:after {
  border-radius: 50% 50% 0 0;
}

.wave:before {
  animation: animateWave 10s linear infinite;
}

.wave:after {
  animation: animateWave2 10s linear infinite;
}

@keyframes animateWave {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animateWave2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
} 

上面的代码使用伪元素:before和:after来绘制两个有渐变色的波浪线，并通过贝塞尔曲线来使波浪线的形状更加平滑自然。

在这里，其他重要的CSS属性包括position、height、width、background、border-radius和animation等。

使用这个波浪线可以带来视觉上的美感，特别是用于背景元素的设计中。当然，你也可以根据需要自定义波浪线的高度、宽度、颜色、速度、旋转角度等属性。