如何使用 CSS 创建 Wave 加载器?

cssweb developmentfront end technology更新于 2024/1/25 7:40:17

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

方法

使用 CSS 创建 Wave 加载器有多种技术。以下是三种常用方法 -

使用 Div 元素
使用 SVG 路径

现在让我们通过示例详细了解每种方法。

方法 1:使用"Div 元素"

创建波形加载器的第一种方法是使用"Div 元素"。创建一系列 div 组件，并使用 transform 和 translation 属性为其添加动画效果，从而产生类似波浪的效果。

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

<!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>

方法二:使用 `SVG 路径`

创建波形加载器的第二种方法是使用 `SVG 路径`。这需要创建一系列 SVG 路径，并使用 stroke-dash 数组和 stroke-dash 偏移属性为其添加动画效果，以获得类似波浪的效果。

示例

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

<!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>