1. 前言
加载动画是网站或应用程序中必不可少的一部分。一个好的加载动画可以让用户在等待网站或应用程序加载完成时保持耐心，并为用户提供更好的用户体验。CSS 提供了一种简单而有效的方式来创建在页面加载过程中的动画。当使用 CSS 动画时，您不需要依赖于 JavaScript 库或其他第三方插件，这使得您可以创建精美的加载动画而不会影响网站或应用程序的性能。
2. 创建动画元素
要创建一个弧形线条动画，我们需要创建一个容器，并为其添加一个内部圆形和两个带有弧形线线条的 div 元素。首先，我们需要先定义 HTML 元素。
<div class="load-container">
<div class="load-circle"></div>
<div class="load-line load-line-1"></div>
<div class="load-line load-line-2"></div>
</div>
上述 HTML 代码创建了一个名为 .load-container 的 div 元素，其中包含一个名为 .load-circle 的 div 元素和两个名为 .load-line-1 和 .load-line-2 的 div 元素。
3. 为动画元素添加样式
在为动画元素添加样式之前，我们需要先定义 CSS 变量，以便可以在后面的过程中轻松地更改线条的长度。在此过程中，我将使用名为 temperature 的 CSS 变量来调整弧形线条的长度。
:root {
--temperature: 0.6; /* 默认值 0.6 */
}
接下来，我们需要为容器和动画元素添加样式。首先，我们将为 .load-container 添加样式。在这个容器中，我们使用绝对定位将 .load-circle 元素放在容器的中心。我们还使用相对单位设置容器的宽度和高度以及设置 padding 值来让容器扩大到整个屏幕。在这个过程中，我们还可以设置 background-color 和 border-radius 属性来美化容器。
.load-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vmin;
height: 80vmin;
padding: 10vmin;
background-color: #f1f1f1;
border-radius: 50%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
接下来，我们将为 .load-circle 元素添加样式。为了让圆形元素与容器的大小和位置相匹配，并保持在容器的中心，我们将应用以下样式。
.load-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30vmin;
height: 30vmin;
background-color: #fff;
border-radius: 50%;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
接下来，我们将为两个弧形线条元素添加样式。这些元素是由一个带有 transform: rotate() 属性的 div 元素来实现旋转效果的。我们还使用 position:absolute 属性，让这些 div 元素相对于容器进行绝对定位。我们还使用 border-top 属性来创建一个三角形，它将作为弧形线条的形状。我们还可以为这些线条设置颜色和背景颜色，以使它们与容器和圆形元素形成对比。
.load-line {
position: absolute;
top: 50%;
left: 50%;
transform-origin: 0% 50%;
border-top: 2vmin solid #f1f1f1;
color: #f1f1f1;
}
.load-line-1 {
transform: rotate(-45deg);
width: 28vmin;
height: 28vmin;
background-color: #f73c58;
}
.load-line-2 {
transform: rotate(45deg);
width: calc(28vmin * var(--temperature));
height: calc(28vmin * var(--temperature));
background-color: #460063;
}
在上述 CSS 代码中，我们可以看到我们设置了不同的颜色和背景颜色。我们还可以看到我们使用 CSS 变量来动态更改 .load-line-2 元素的长度，具体取决于 temperature 变量的值。这将在下一步中进一步解释。
4. 创建动画
现在我们已经准备好创建加载动画了！我们将使用 @keyframes 规则来定义从 0% 到 100% 的动画样式。在这个加载动画中，我们将使用两个不同的动画来控制弧形线条的长度和旋转速度。
4.1 第一个动画
在第一个动画中，我们将从 0% 到 50% 的时间段内逐渐增加 temperature 变量的值，以将弧形线条稍微延长一点。然后，我们将在 50% 到 100% 的时间段内逐渐减少 temperature 变量的值，以将弧形线条恢复到其原始长度。
@keyframes grow {
0% {
--temperature: 0.6;
}
50% {
--temperature: 0.8;
}
100% {
--temperature: 0.6;
}
}
在上述代码中，我们定义了一个名为 grow 的带有三个关键帧（0%、50%、100%）的动画。在每个关键帧中，我们使用 --temperature 变量来动态更改元素的长度。
4.2 第二个动画
要旋转弧形线条，我们将创建另一个名为 rotate 的关键帧动画。我们将使用 transform: rotate() 属性来创建此旋转效果，使用 0 到 360 度的值。在动画末尾，我们将使用 animation-iteration-count 属性将动画重复一次，以为动画增加可爱的效果。
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.load-container {
animation-name: rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.load-line-2 {
animation-name: grow;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
在上述代码中，我们将 rotate 动画应用于容器，并将 grow 动画应用于 .load-line-2 元素。我们还指定了动画的一些其他属性，例如持续时间、缓动函数和迭代计数。
5. 结论
在本文中，我们学习了如何使用 CSS 动画创建一个简单而美观的弧形线条加载动画。我们创建了一个容器，并添加了一个内部圆形和两个带有弧度线的 div 元素。我们还使用 CSS 变量以动态的方式调整了弧形线条的长度，并使用 @keyframes 规则定义了两个不同的动画来控制弧形线条的长度和旋转速度。希望这篇文章有助于您在构建网站或应用程序时创建惊人的加载动画。