前端必学的CSS3波浪效果演示-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端必学的CSS3波浪效果演示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以下是这三种CSS3波浪效果的使用说明

使用translateX和translateZ属性创建波浪效果：

使用场景：

适用于需要在X轴上平移和在Z轴上应用3D变换的波浪效果。
可以用于创建具有起伏效果的海浪、水面波纹等效果。

优点：

通过3D变换，可以实现更加真实的波浪效果。
可以通过调整translateX和translateZ的值来控制波浪的形状和速度。

缺点：

对于不支持CSS3 3D变换的浏览器，可能无法正常显示波浪效果。

使用border-radius属性创建波浪形状：

使用场景：

适用于需要创建具有波浪形状的背景或边框效果。
可以用于创建具有圆形波浪形状的按钮、卡片等元素。

优点：

通过border-radius属性，可以快速创建出具有波浪形状的效果。
可以通过调整border-radius的值来控制波浪的形状和曲率。

缺点：

无法实现波浪的动画效果，只能创建静态的波浪形状。

使用box-shadow属性创建波浪阴影效果：

使用场景：

适用于需要创建具有波浪形状的阴影效果。
可以用于创建具有波浪阴影效果的卡片、图像等元素。

优点：

通过box-shadow属性，可以快速创建出具有波浪阴影的效果。
可以通过调整box-shadow的位置和颜色来控制波浪的形状和阴影效果。

缺点：

无法实现波浪的动画效果，只能创建静态的波浪阴影效果。
对于不支持CSS3 box-shadow属性的浏览器，可能无法正常显示波浪阴影效果。

根据不同的需求和浏览器兼容性要求，你可以选择适合的波浪效果来应用到你的项目中。

1. 使用translateX和translateZ属性创建波浪效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .wave {
      width: 400px;
      height: 200px;
      background-color: #f0f0f0;
      position: relative;
      overflow: hidden;
    }

    .wave:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background: linear-gradient(to right, #4facfe, #00f2fe);
      transform: translate3d(0, 0, 0);
      animation: wave 1s infinite linear;
    }

    @keyframes wave {
      0% {
        transform: translateX(0) translateZ(0) scaleY(1);
      }
      50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.5);
      }
      100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
      }
    }
  </style>
</head>
<body>
  <div class="wave"></div>
</body>
</html>

在这个示例中，我们创建了一个带有波浪效果的容器。通过wave类选择器，我们设置容器的宽度、高度和背景颜色，并将其定位为相对定位，并设置overflow: hidden以隐藏超出容器的部分。

然后，我们使用:before伪元素来创建波浪效果。我们设置伪元素的位置为绝对定位，并将其放置在容器的底部。通过linear-gradient背景渐变，我们创建了一个从左到右的颜色渐变。

接下来，我们使用transform属性来实现波浪的动画效果。通过translateX和translateZ属性，我们将伪元素在X轴上平移，并在Z轴上应用3D变换。通过scaleY属性，我们在Y轴上进行缩放，以实现波浪的起伏效果。

最后，我们使用@keyframes关键帧动画来定义波浪的动画过程。在0%、50%和100%的关键帧中，我们分别设置了不同的transform值，从而实现波浪的运动效果。

通过在浏览器中打开这个示例，你可以看到一个简单的CSS3波浪效果。你可以根据需要调整容器的大小、颜色和动画效果来创建自己的波浪效果。

2. 使用border-radius属性创建波浪形状：

<!DOCTYPE html>
<html>
<head>
  <style>
    .wave {
      width: 400px;
      height: 200px;
      background-color: #f0f0f0;
      position: relative;
      overflow: hidden;
    }

    .wave:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background: linear-gradient(to right, #4facfe, #00f2fe);
      border-radius: 50%;
      transform: translate3d(0, 0, 0);
      animation: wave 1s infinite linear;
    }

    @keyframes wave {
      0% {
        transform: translateX(0) translateZ(0) scaleY(1);
      }
      50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.5);
      }
      100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
      }
    }
  </style>
</head>
<body>
  <div class="wave"></div>
</body>
</html>

在这个示例中，我们使用border-radius属性将伪元素的形状设置为圆形，从而创建了一个波浪形状的效果。

3. 使用box-shadow属性创建波浪阴影效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    .wave {
      width: 400px;
      height: 200px;
      background-color: #f0f0f0;
      position: relative;
      overflow: hidden;
    }

    .wave:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background: linear-gradient(to right, #4facfe, #00f2fe);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      transform: translate3d(0, 0, 0);
      animation: wave 1s infinite linear;
    }

    @keyframes wave {
      0% {
        transform: translateX(0) translateZ(0) scaleY(1);
      }
      50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.5);
      }
      100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
      }
    }
  </style>
</head>
<body>
  <div class="wave"></div>
</body>
</html>