CSS 如何创建波浪背景

在本文中，我们将讨论使用CSS创建波浪背景的不同方法。使用CSS创建波浪背景是一种常用的技术，可以为网页添加独特且动态的视觉元素。可以使用CSS动画、伪元素和剪切路径等各种技术来实现这种效果。

方法

我们有两种不同的方法来使用CSS创建波浪背景，包括以下内容：

使用“CSS渐变”
使用“:before伪元素”

让我们详细看看每个步骤。

方法1：使用“CSS渐变方法”

第一种方法是使用CSS创建波浪背景，作为“CSS渐变”。通过定义一系列颜色来创建一个弯曲的波浪形状，可以将此渐变应用为HTML元素的背景以创建波浪效果。

示例

以下是使用“CSS渐变”创建波浪背景的示例。

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="style.css" />
   <title>CSS Waves</title>
   <style>
      html,
      body {
         height: 100%;
      } 
      wave-container {
         height: 5%;
         width: 100%;
         position: absolute;
         bottom: 0;
         left: 0;
         background-color: #e6f2ff;
      }
      .wave {
         background: url(https://ilumina.ca/img/blue_bg_02.png)
         repeat-x;
         position: absolute;
         top: -198px;
         width: 6400px;
         height: 300px;
      }
   </style>
</head>
<body>
   <div class="wave-container">
      <div class="wave"></div>
      <div class="wave"></div>
   </div>
</body>
</html>

方法2：使用“:before伪元素”

第二种方法是使用CSS创建波浪背景，使用的是“ :before伪元素 ”。:before伪元素允许您在一个元素之前添加内容，在这种情况下，将用于创建波浪效果。在这里，您可以为父容器wave-container创建一个新的CSS规则，并将:before伪元素添加到其中。

示例

以下是使用“:before伪元素方法”创建波浪背景的示例。

index.html 文件

<!DOCTYPE html>
<html> 
<head>
   <style>
      .wave-container {
         height: 5%;
         width: 100%;
         position: absolute;
         bottom: 0;
         left: 0;
         background-color: #e6f2ff;
      }
      .wave {
         background: url(https://ilumina.ca/img/blue_bg_02.png)
         repeat-x;
         position: absolute;
         top: -198px;
         width: 6400px;
         height: 300px;
         animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
         transform: translate3d(0, 0, 0);
      }
      @keyframes wave {
         0% {
            margin-left: 0;
         }
         100% {
            margin-left: -1500px;
         }
      }
   </style>
</head>
<body>
   <div class="wave-container">
      <div class="wave"></div>
   </div>
</body>
</html>

结论

在本文中，我们探讨了使用CSS创建波浪背景的两种不同方法。其中，我们使用了两种不同的方法，即“CSS渐变”和“:before伪元素”。”CSS渐变”方法涉及设置多个颜色停止以创建弯曲的形状，并将结果渐变作为元素的背景图像。”:before伪元素”方法涉及创建一个伪元素，并应用CSS样式来创建波浪效果。这两种方法都有各自的优点，并根据网页的具体需求来使用。