如何使用 CSS 旋转形状加载器动画?
在本文中，我们将了解如何使用 CSS 旋转形状加载器动画。不同形状的加载动画是 Web 应用的重要组成部分，因为它可以帮助用户在等待网站加载时保持参与度。网页或应用程序可以添加多种动画，其中一种流行的加载动画是旋转形状加载器。这种动画的特点是形状会持续旋转，直到网页完全加载完毕。
接下来，我们将使用不同的方法，通过不同的示例来旋转形状加载器动画。
方法
我们使用 CSS 旋转形状加载器动画的方法包含多个步骤。让我们详细讨论旋转形状加载器动画的步骤。
步骤 1:创建一个带有类的 div
第一步是为要旋转的形状创建 HTML 标记。目前，我们使用一个带有类名 loader 的简单 div 元素来创建一个形状。
<div class="loader"></div>
步骤 2:添加 CSS 样式
让我们创建一个具有一定宽度和高度的 loader -
.loader {
width: 50px;
height: 50px;
}
步骤 3:创建形状
现在我们需要添加想要旋转的形状。在本例中，我们将使用圆形。我们可以使用 border-radius 属性来创建一个圆形。我们还可以设置 border 和 border-color 属性，使圆形呈现纯色。
.loader {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #0055ff;
border-top-color: transparent;
}
步骤 4:添加动画
要创建旋转动画，我们可以使用 CSS 动画属性。我们可以使用 @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，使 loader 元素居中，并在其下方显示加载文本。如果您想在显示 loader 的同时显示其他内容(例如页面正在加载的消息)，这种方法非常有用。
<!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>
输出
在此示例中，我们创建了一个基本的 HTML 文档，其中包含一个标题标签和一个用作加载器容器的 div 元素。在该容器内，我们添加了一个类名为"loader"的 div 元素，它将作为我们的旋转形状。
我们还为 loader 和 loader-container 元素添加了一些 CSS 样式。loader 元素被赋予了宽度和高度，以及一个圆形边框。border-top-color 设置为透明，因此我们只能看到圆形的四分之三。我们还为 loader 元素添加了一个动画属性，该属性使用我们定义的"旋转"关键帧来创建旋转动画。
loader-container 元素设置为 flex 显示，justify-content 和 align-items 设置为 center，这将使 loader 元素在页面上居中显示。我们还在加载器下方添加了一些文本，以便用户了解页面仍在加载中。
示例 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>
输出
在此示例中，我们移除了 loader 元素的 border 和 border-radius 属性，并将其宽度和高度设置为 60 像素，背景色设为蓝色 (#0055ff)。
我们保留关键帧动画，在一秒钟内将 loader 元素从 0 度旋转到 360 度。这将创建一个旋转的方形 loader 动画，与之前的圆形 loader 示例略有不同。
您可以尝试不同的形状、颜色和动画时长，以自定义 loader 动画，使其更符合您网站的设计风格。
总结
在本文中，我们了解了两种使用相同关键帧动画在 HTML 中旋转 loader 元素的 CSS 方法。如果要说两者的主要区别，那就是加载器元素的样式。第一种方法中，我们使用边框和边框半径来创建圆形，而第二种方法中，我们使用背景色来创建方形。
最后，选择使用哪个示例取决于具体需求和偏好。如果需要与加载器一起显示其他内容，我们可以使用第一种方法，因为它更合适;如果需要添加简约的加载器动画，那么第二种方法是一个不错的选择。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
