css实现波浪效果图

CSS是一种非常强大的样式语言，它可以实现许多有趣的效果，包括波浪效果。如果您想给网站添加一些动态效果，那么波浪效果可能是一个好的选择。

接下来，我们将介绍如何使用CSS创建一个简单的波浪效果。

.wave {
  height: 150px;
  width: 100%;
  position: relative;
  background-color: #1b1d21;
}

.wave:before,.wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% / 50%;
}

.wave:before {
  top: -125px;
  left: -25px;
  width: 150px;
  height: 150px;
  background-color: #ffdab9;
}

.wave:after {
  top: -100px;
  right: -25px;
  width: 200px;
  height: 200px;
  background-color: #ffdab9;
}

这段CSS代码将创建一个150像素高的波浪形DIV。DIV将使用“before”和“after”伪元素来创建上部和下部的波浪形。注意，我们使用了border-radius属性来将DIV变成圆形。

使用这个CSS代码，您可以获得一个漂亮的波浪效果，可以用于任何类型的网站，包括博客、社交媒体和电子商务网站等。