CSS 如何旋转形状加载器动画

在本文中，我们将看到如何使用CSS旋转形状加载器动画。不同形状的加载动画是Web应用的重要部分，因为它可以帮助用户在等待网站加载时保持参与感。在网页或应用程序中可以添加多种动画，其中一种常见的加载动画类型是旋转形状加载器。该动画具有良好的特性，即在完全加载网页之前，形状会持续旋转。

接下来，我们将使用不同的示例来旋转形状加载器动画。

方法

我们使用CSS旋转形状加载器动画的方法包括多个步骤。让我们详细讨论旋转形状加载器动画的步骤。

步骤1：创建一个带类的div

第一步是创建一个HTML标记，用于要旋转的形状。目前，我们使用一个简单的div元素和一个类名为“loader”的类来创建形状。

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

步骤2：添加CSS样式

让我们创建一个具有一定宽度和高度的加载器 –

.loader {
   width: 50px;
   height: 50px;
}

步骤3：创建形状

现在，我们需要添加我们想要旋转的形状。在这个示例中，我们将使用一个圆。我们可以使用border-radius属性创建一个圆形。我们还可以设置边框和边框颜色，给圆形一个实心的颜色。

.loader {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 3px solid #0055ff;
   border-top-color: transparent;
}

步骤4：添加动画

为了创建旋转动画，我们可以使用CSS的animation属性。我们可以使用@keyframes规则创建一个关键帧动画。在这个示例中，我们将使用一个360度旋转的动画。

.loader {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   border: 3px solid #0055ff;
   border-top-color: transparent;
   animation: rotation 1s linear infinite;
}

@keyframes rotation {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

步骤5：一些插件

<div class="loader-container">
   <div class="loader"></div>
   <p>Loading...</p>
</div>
.loader-container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   height: 100vh;
}

p {
   font-size: 18px;
   margin-top: 20px;
}

loader-container 元素被设置为 flex 布局， justify-content 和 align-items 设置为 center 以使 loader 元素在页面上居中显示。flex-direction 设置为 column，高度设置为 100vh 以使 loader-container 元素填充视口的高度。

示例1

在第一种方法中，我们使用了一个带有 loader-container 类的容器元素 div 来居中显示加载器，并在其下方显示加载文本。这种方法非常适用于希望与加载器一起显示其他内容，例如页面正在加载的消息。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Rotating Shape Loader Animation</title>
   <style>
      .loader-container {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         height: 100vh;
      }    
      .loader {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         border: 3px solid #0055ff;
         border-top-color: transparent;
         animation: rotation 1s linear infinite;
      }    
      @keyframes rotation {
         from {
            transform: rotate(0deg);
         }
         to {
            transform: rotate(360deg);
         }
      }    
      p {
         font-size: 18px;
         margin-top: 20px;
      }
   </style>
</head>
<body>
   <div class="loader-container">
      <div class="loader"></div>
      <p>Loading...</p>
   </div>
</body>
</html>

输出

CSS 如何旋转形状加载器动画

在这个示例中，我们创建了一个基本的HTML文档，它包含一个标题标签和一个作为加载器容器的单个div元素。在这个容器内部，我们添加了一个class为”loader”的div元素，它将作为我们的旋转形状。

我们还为加载器和加载器容器元素添加了一些CSS样式。加载器被赋予了宽度和高度，并且有一个形成圆形的边框。border-top-color的值设置为透明，这样我们只能看到四分之三的圆形。我们还为加载器元素添加了一个动画属性，使用我们定义的”rotation”关键帧来创建旋转动画。

加载器容器元素被设置为以flex方式显示，justify-content和align-items设置为center，这样加载器元素就在页面上居中显示。我们还在加载器下面添加了一些文字，让用户知道页面仍在加载中。

示例2

在这个示例中，我们只使用了一个名为loader的div元素来创建加载器动画。这个示例采用了一种更简洁、专注于加载器本身的方法。如果您想要一个简单、干净且不需要额外内容的加载器动画，这个方法很有用。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Rotating Square Loader Animation</title>
   <style>
      .loader {
         width: 60px;
         height: 60px;
         background-color: #0055ff;
         animation: rotation 1s linear infinite;
      }

      @keyframes rotation {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <div class="loader"></div>
</body>
</html>