CSS 如何创建波浪加载器

在本文中，我们将使用CSS创建一个波浪加载器。波浪加载器是一种具有波浪效果的加载动画。这是一种在线应用程序中信号进度的标准方式，通过指示正在加载素材，可以增强用户体验。制作CSS波浪加载器是一种基本技术，它使用CSS动画和关键帧。您可以通过设置动画属性和关键帧来设计一个动态和美观的波浪加载器，以满足您个人的需求。

方法

有多种技术可以使用CSS创建波浪加载器。以下是三种常用的方法：

使用Div元素
使用SVG路径

现在，让我们详细了解每种方法及其示例。

方法1：使用Div元素

创建波浪加载器的第一种方法是使用Div元素。这涉及创建一系列div组件并使用transform和translate属性对它们进行动画处理，以产生波浪效果。

在这里，我们将通过一个示例来实现这种方法-

<!DOCTYPE html>
<html>
<head>
   <title>Wave Loader using CSS and Div Elements</title>
   <style>
      .wave-loader {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
      }
      .wave-loader div {
         width: 20px;
         height: 60px;
         background-color: #0077ff;
         margin: 0 5px;
         border-radius: 50% 50% 0 0;
         transform-origin: bottom;
         animation: wave 1s ease-in-out infinite;
      }
      .wave-loader div:nth-child(2) {
         animation-delay: -0.4s;
      }
      .wave-loader div:nth-child(3) {
         animation-delay: -0.2s;
      }
      @keyframes wave {
         0% {
            transform: scaleY(0.4);
         }
         50% {
            transform: scaleY(1);
         }
         100% {
            transform: scaleY(0.4);
         }
      }
   </style>
</head>
<body>
   <div class="wave-loader">
      <div></div>
      <div></div>
      <div></div>
   </div>
</body>
</html>

方法2：使用SVG路径

创建波浪加载器的第二种方法是使用SVG路径。这需要创建一系列SVG路径，并使用stroke-dash array和stroke-dash offset属性对其进行动画处理，以获得类似波浪的效果。

示例

这里，我们将通过一个示例来实现这种方法 –

<!DOCTYPE html>
<html>
<head>
   <title>Wave Loader using CSS and SVG Paths</title> 
   <style>
      .wave-loader {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
      }
      .wave-loader svg {
         width: 100px;
         height: 60px;
      }
      .wave-loader path {
         stroke: #0077ff;
         stroke-width: 3;
         stroke-dasharray: 120;
         stroke-dashoffset: 0;
         animation: wave 1s ease-in-out infinite;
      }
      .wave-loader path:nth-child(2) {
         animation-delay: -0.4s;
      }
      .wave-loader path:nth-child(3) {
         animation-delay: -0.2s;
      }
      @keyframes wave {
         0% {
            stroke-dashoffset: 0;
         }
         50% {
            stroke-dashoffset: 60;
         }
         100% {
            stroke-dashoffset: 120;
         }
      }
   </style>
</head>
<body>
   <div class="wave-loader">
      <svg viewBox="0 0 100 60">
         <path d="M0 30 Q 20 10 40 30 T 80 30" />
         <path d="M0 30 Q 20 50 40 30 T 80 30" />
         <path d="M0 30 Q 20 70 40 30 T 80 30" /> 
      </svg>
   </div>
</body>
</html>