CSS 加载器：初学者创建动态加载动画的指南

你好，未来的网页开发者们！今天，我们将深入探索CSS加载器的迷人世界。作为你友好的计算机老师邻居，我很高兴能指导你完成这次旅行。如果你之前从未写过一行代码，也不用担心——我们将从最基本的内容开始，逐步学习。在本教程结束时，你将能够创建出吸引眼球的加载动画，让你的网站看起来专业且引人入胜。那么，让我们开始吧！

CSS - Loaders

什么是CSS加载器？

在我们跳入代码之前，先来了解一下CSS加载器是什么，以及为什么它们很重要。你是否访问过某个网站，在等待内容加载时看到了旋转的圆圈或跳动的点？那就是加载器！这些动画为用户提供视觉反馈，让他们知道幕后正在发生事情。这就好比告诉你的访客：“请稍等一下，我们正在为你准备东西！”

创建你的第一个加载器

现在，让我们卷起袖子，创建我们的第一个加载器。我们将从简单开始，然后逐渐增加复杂性。

CSS 加载器 - 基本示例

这里有一个基本的加载器，它创建了一个旋转的圆圈：

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

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

让我们分解一下：

我们创建了一个带有类名 "loader" 的 <div> 元素。
在我们的CSS中，我们将这个div样式化为一个圆形，使用 border-radius: 50%。
我们在所有边上设置了浅灰色的边框（#f3f3f3），除了顶部，顶部是蓝色的（#3498db）。
animation 属性设置了我们的旋转效果：

spin 是我们动画的名称。
2s 意味着动画完成需要2秒。
linear 意味着动画速度是恒定的。
infinite 意味着它会无限重复。

@keyframes 规则定义了动画期间发生的事情。我们从0度旋转到360度。

就这样！你已经创建了自己的第一个加载器。是不是很激动？

CSS 加载器 - 使用 border-right 属性

现在，让我们尝试一个略有不同的方法。我们将创建一个看起来像是在顺时针“填充”的加载器：

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

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
border-right: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

这里的 key 不同之处在于我们添加了 border-right: 16px solid #3498db;。这创建了一个在旋转时看起来像是在填充的加载器。这就像看着时钟的手移动，不是吗？

CSS 加载器 - 使用 :before 和 :after

现在，让我们升级一下，使用 :before 和 :after 伪元素创建一个更复杂的加载器。这将给我们一个很酷的“双环”效果：

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

.loader {
width: 120px;
height: 120px;
position: relative;
}

.loader:before, .loader:after {
content: "";
position: absolute;
border: 8px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}

.loader:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-color: #3498db;
}

.loader:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #e74c3c;
animation-delay: 0.5s;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

这个加载器创建了两个旋转的圆圈：

外圆（:before）有一个蓝色的顶部边框。
内圆（:after）稍小一些，顶部边框是红色的，并且在半秒后开始旋转。

结果是令人着迷的双环效果。是不是很酷？

CSS 加载器 - 使用 linear-gradient

作为我们的最后一个技巧，让我们使用 linear-gradient 创建一个加载器。这将给我们一个平滑的连续颜色过渡：

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

.loader {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(to right, #3498db 50%, #f3f3f3 50%);
animation: spin 1s linear infinite;
}

.loader:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
margin: 10px;
position: relative;
z-index: 1;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

这个加载器使用了一个巧妙的技巧：

我们创建了一个半蓝色半灰色的圆圈渐变。
然后我们使用 :before 伪元素在顶部添加了一个白色圆圈。
当外圆旋转时，它创造了平滑加载动画的错觉。

加载器方法总结

以下是我们在本文中介绍的方法的快速参考表：

方法	描述	关键属性
基本示例	简单旋转的圆圈	border, border-radius, animation
border-right	顺时针填充效果	border, border-right
:before 和 :after	双环效果	:before, :after, animation-delay
linear-gradient	平滑颜色过渡	linear-gradient, :before

就这样！你已经学习了四种不同的创建CSS加载器的方法。记住，这些只是起点——你可以自由地尝试颜色、大小和动画，创建你自己的独特加载器。

在我们结束之前，我想分享一个小故事。当我第一次教CSS时，有一个学生对于加载器感到沮丧。他说：“为什么要麻烦？用户反正不喜欢等待！”但当他创建了第一个自定义加载器时，他的眼睛亮了。他意识到，即使是很小的等待，也可以通过正确的动画转变为愉快的体验。这就是CSS加载器的力量——它们将等待转化为好奇。

所以，去创造吧！尝试这些技巧，混合搭配它们，最重要的是，享受乐趣。记住，在网页开发的世界里，创造力是你最好的朋友。快乐编码，下次见，让那些加载器继续旋转！

Credits: Image by storyset