CSS或SVG中的波浪效果

Question

我想用 CSS 创造柔和的波浪效果，但遇到了一些问题。目前我正在使用 border-radius 来创建波浪，但看起来更像云朵。我尝试使用 transform: translateZ(180deg);，但是 div 的颜色会翻转。

我想要的效果如下图：

我现在拥有的效果如下图：

.wave1 {
  left: 0%;
  margin-left: -50px;
}

.wave2 {
  margin-left: -69px;
}

.wave3 {
  margin-left: -69px;
}

.wave4 {
  margin-left: -69px;
}

.waves {
  width: 200%;
  clear: none;
  z-index: 100;
  position: absolute;
  margin-top: 200px;
  margin-left: -150px;
}

.waves div {
  float: left;
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent;
  border-radius: 70%/100px 100px 0 0;
  background-color: #fff;
}

.bottom-half {
  width: 100%;
  height: 50%;
  top: 70%;
  position: absolute;
  background-color: #fff;
}

.background-waves {
  width: 200%;
  clear: none;
  z-index: 50;
  position: absolute;
  margin-top: 190px;
  margin-left: 75px;
}

.bwave1 {
  left: 0%;
  margin-left: -50px;
}

.bwave2 {
  margin-left: -69px;
}

.bwave3 {
  margin-left: -69px;
}

.bwave4 {
  margin-left: -69px;
}

.background-waves div {
  float: left;
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent;
  border-radius: 70%/100px 100px 0 0;
  background-color: #fff;
  opacity: 0.5;
}

<div class="waves">
  <div class="wave1"></div>
  <div class="wave2"></div>
  <div class="wave3"></div>
  <div class="wave4"></div>
  <div class="wave5"></div>
</div>
<div class="background-waves">
  <div class="bwave1"></div>
  <div class="bwave2"></div>
  <div class="bwave3"></div>
  <div class="bwave4"></div>
  <div class="bwave5"></div>
</div>

- Eliot S Winchell

---

要使用CSS得到这些形状，你真的在挑战CSS的边界。你可能想考虑使用SVG或CSS形状。在某个时候，你可能只是让事情变得更难。你需要决定那个阈值在哪里。 - sheriffderek

这个链接对你有帮助吗？https://codepen.io/rstacruz/pen/oxJqNv - Pyromonk

@sheriffderek 哇，谢谢！我刚刚用Photoshop制作了我所需的波浪效果，并将其导出为SVG文件，效果非常不错。那么SVG文件有什么缺点吗？ - Eliot S Winchell

唯一的缺点是跨浏览器兼容性问题 - 但截至今日......这不应该是一个问题。 http://caniuse.com/#feat=svg SVG 真是太棒了。https://www.youtube.com/watch?v=tsGa-gcckwY Chris Coyier 还有一本很棒的书。 - sheriffderek

Answer 1

我建议使用内联手动编码的SVG。你的形状非常简单，用<path>元素制作波浪很容易。关于MDN上的SVG路径，这就是全部需要知道的。在下面的例子中，我使用了两个带有二次贝塞尔曲线的路径元素来绘制波浪：

svg {
  background: url('https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg') no-repeat center center;
  background-size: cover;
  width: 100%;
  display: block;
}

<svg viewbox="0 0 100 25">
  <path fill="#9EAFFD" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z" />
  <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>

- web-tiki