css上下浮动的波浪

在前端开发中，我们经常会使用CSS来实现页面效果。CSS中有一种上下浮动的波浪效果十分美观，今天我们就来学习一下如何实现这种效果。

.wave {
  position: relative;
  height: 150px;
  background: #fff;
}

.wave:before,
.wave:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 50%;
  height: 50px;
  background: #5d79ff;
  border-radius: 100% 0 0 0;
}

.wave:before {
  left: 0;
  top: 30px;
  transform: rotate(-45deg);
}

.wave:after {
  right: 0;
  top: 20px;
  transform: rotate(45deg);
} 

以上代码中，我们首先定义了一个高度为150px的容器，并将其定位为相对定位。接着，我们使用:before和:after伪类来实现波浪效果。

其中，我们设置:before的左边距为0，上边距为30px，并将其旋转45度。同时，我们设置:after的右边距为0，上边距为20px，并将其旋转45度。使用这种设置，我们就可以轻松地实现上下浮动波浪的效果啦！

需要注意的是，这种波浪效果只是一种样式美化的效果，并不能真正实现波浪的效果。如果需要在页面中实现真正的波浪效果，就需要使用更加复杂的代码实现。