CSS 如何设计渐变球加载动画

渐变球加载动画是一种常见且吸引人的视觉效果，用于吸引网站用户。它是一种简单的动画，通过淡入和淡出球体来创建引人注目的加载效果。

CSS中的渐变球加载动画是什么

渐变球加载动画是一种类型的加载动画，其中一系列的圆圈或球体在循环中淡入和淡出。它表示正在加载网页上的内容。这种类型的动画通常用于网页设计，以使用户在等待内容加载期间保持参与和了解。

该动画主要使用CSS关键帧动画和伪元素来创建圆圈或球体。将球体设置为以不同的时间间隔淡入和淡出，以创建视觉上有趣的动画效果。

设计CSS渐变球加载动画的步骤

设计CSS渐变球加载动画的步骤很简单，包括创建HTML结构，然后使用CSS关键帧动画和伪元素创建动画效果。在这里，我们将学习以下步骤来设计CSS渐变球加载动画。

步骤1：创建HTML标记

要设计一个渐变球加载动画，首先，我们需要创建一个HTML结构。可以通过使用一个简单的div容器和一个用于在CSS中设置动画样式的类名来完成。例如 –

<div class="my-loader"></div>

步骤2：定义CSS样式

在这一步中，我们将会为淡入淡出小球加载动画定义CSS样式。可以通过使用关键帧来定义动画，然后使用动画属性将动画应用于div容器。例如 –

.my-loader {
   position: relative;
   width: 40px;
   height: 40px;
   margin: 0 auto;
}
@keyframes fade {
   0% {
      opacity: 0;
      transform: scale(0.3);
   }
   50% {
      opacity: 1;
   }
   100% {
      opacity: 0;
      transform: scale(1.5);
   }
}

步骤3：添加小球

为了创建淡入淡出的小球加载动画，我们需要添加小球。可以通过使用伪元素来实现。我们将使用before和after伪元素来创建小球，并应用所需的样式来创建淡入和淡出效果。例如 –

.fade-balls-loader:before,
.fade-balls-loader:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   margin: auto;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: red;
}

步骤4：微调动画

在添加球体之后，我们通过调整动画的定时、持续时间和缓动来微调动画。这可以通过调整animation-timing function、animation-duration和animation-delay属性来实现。例如 –

.fade-balls-loader:before,
.fade-balls-loader:after{
   animation: fade 1.5s ease-in-out infinite;
}
.fade-balls-loader:before {
   animation-delay: 0.6s;
}

示例1

逐渐消失的小球加载动画。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .my-loader {
         position: relative;
         margin:auto;
         width: 40px;
         height: 40px;
      }
      .my-loader:before,
      .my-loader:after {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background-color: red;
         animation: fade 1.5s ease-in-out infinite;
      }
      .my-loader:before {
         animation-delay: 0.6s;
      }
      @keyframes fade {
         0% {
            opacity: 0;
            transform: scale(0.3);
         }
         50% {
            opacity: 1;
         }
         100% {
            opacity: 0;
            transform: scale(1.5);
         }
      }
   </style>
</head>
   <body>
      <h3>Fade Ball Loader Animation with Single Ball</h3>
      <div class="my-loader"></div>
   </body>
</html>

在上面的示例中，我们创建了一个简单的HTML标记，其中包含一个具有类名为my-loader的div元素。然后，我们为容器元素以及:before和:after伪元素定义了CSS样式。之后，我们使用animation属性将淡入动画应用于球，并使用animation-delay属性设置第一个球的延迟。最后，我们使用@keyframes规则定义了淡入动画。

示例2

带有三个球的淡入球加载动画。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .my-loader {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100px;
      }
      .ball {
         width: 36px;
         height: 36px;
         margin: 0 4px;
         border-radius: 50%;
         opacity: 0;
         animation: fade 1.5s ease-in-out infinite;
      }
      .ball-1 {
         background-color: #00bfff;
         animation-delay: 0.3s;
      }
      .ball-2 {
         background-color: #ff7f50;
         animation-delay: 0.6s;
      }
      .ball-3 {
         background-color: #7fff00;
         animation-delay: 0.9s;
      }
      @keyframes fade {
         0% {
            opacity: 0;
            transform: scale(0.1);
         }
         50% {
            opacity: 1;
         }
         100% {
            opacity: 0;
            transform: scale(1.2);
         }
      }
   </style>
</head>
   <body>
      <h3>Fade Ball Loader Animation with Three Balls</h3>
      <div class="my-loader">
         <div class="ball ball-1"></div>
         <div class="ball ball-2"></div>
         <div class="ball ball-3"></div>
      </div>
   </body>
</html>

在上面的示例中，我们创建了一个简单的HTML标记，其中包含四个带有ball、ball-1、ball-2和ball-3类的div元素，它们位于container div内部。我们使用display属性将容器元素设置为flexbox，并将球对齐到中心。我们还设置了高度和background-color属性来创建加载器动画的背景。