使用纯 CSS 创建波浪

大家好！

今天我们将学习如何使用纯 CSS 创建类似 ps4 界面的波浪，以下是最终结果：

让我们开始吧

HTML



<div class='box'>
          <div class='wave -one'></div>
          <div class='wave -two'></div>
          <div class='wave -three'></div>
      </div>

我们需要为您想要设置的每个波浪设置一个“div”，在这个例子中，我们将使用其中 3 个带有类“wave”的 div，并将它们包装在另一个带有类“box”的 div 中。

CSS



.box {
  position: fixed;
  top: 0;
  transform: rotate(80deg); 
  left: 0;
}

.wave {
  position: absolute;
  opacity: .4;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  border-radius: 43%;
}

首先，我们需要将“box”容器定义为固定位置，以实现与 ps4 界面相同的效果。接下来的 3 条 CSS 规则仅用于将“box”元素定位到您想要的任何位置。您可以随意调整这些值。

设置好“box”元素后，就可以创建波浪了。如果你查看“wave”类中的规则，你会发现大多数规则都是关于波浪的定位，但这个动画的关键规则是 border-radius，原因如下：

我们正在创建具有适度边框半径值的矩形，如果我们放大该动画的一个角，并将波浪放置在正确的位置，我们就能实现波浪效果。

现在我们需要创建动画来旋转波浪。超级简单！



@keyframes rotate {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}

一旦我们在 CSS 中有了动画，我们就需要将动画设置到波浪中，使用不同的时间和背景颜色，你还可以调整不透明度：D



.wave.-one {
  animation: rotate 7000ms infinite linear;
  opacity: .1;
  background: #0af;
}

.wave.-two {
  animation: rotate 3000ms infinite linear;
  opacity: .1;
  background: black;
}

.wave.-three {
  animation: rotate 7500ms infinite linear;
  background-color: #77daff;
}

大功告成！现在你应该能看到波浪了！跟我之前做的这个 codepen 类似（不过只能在桌面端正常使用）。

这是我的第一篇博文！希望你喜欢 :D

鏂囩珷鏉ユ簮锛�https://dev.to/pixmy/create-waves-with-pure-css-5gp