一种巧妙的 CSS 波浪效果实现方法

2024-02-14 00:16:11

引言

在当今充斥着视觉元素的网络世界中，波浪效果已成为增添动感和魅力的有效方式。而借助 CSS 的强大功能，我们无需编写繁琐的代码即可轻松创建这些效果。本文将介绍一种巧妙的 CSS 波浪效果实现方法，以激发您的设计灵感。

CSS 实现原理

CSS 波浪效果示例

如上图所示，这种波浪效果是通过一系列伪元素的巧妙组合来实现的。首先，我们创建一个带有渐变背景的父元素，代表波浪的形状。然后，我们使用伪元素 ::before 和 ::after 来创建两个额外的图层，这些图层在父元素上形成波浪的波峰和波谷。

动画实现

为了让波浪动起来，我们使用 CSS 动画。具体来说，我们将动画应用到伪元素 ::after 上，设置其负延迟时间。负延迟时间的巧妙之处在于，它允许波浪效果从父元素之外开始，逐渐向父元素内流动。这种方法创造了一种逼真的波浪运动，好像波浪是从远方涌向我们。

步骤详解

/* 父元素：波浪背景 */
.wave-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #0099ff, #99ffff);
  position: relative;
}

/* 伪元素 ::before：波峰 */
.wave-container::before {
  content: "";
  width: 100%;
  height: 50%;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  animation: wave-peak 5s infinite;
  animation-delay: -2s;
}

/* 伪元素 ::after：波谷 */
.wave-container::after {
  content: "";
  width: 100%;
  height: 50%;
  background: white;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: wave-trough 5s infinite;
  animation-delay: -2s;
}

/* 波峰动画 */
@keyframes wave-peak {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 波谷动画 */
@keyframes wave-trough {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}