HTML 圆形加载动画

在本文中，我们将介绍HTML中的圆形加载动画。加载动画在网页设计中起到了很重要的作用，可以提高用户体验和页面加载的可视化效果。圆形加载动画可以通过HTML和CSS来创建，下面我们将详细介绍其中的实现方法和示例。

阅读更多：HTML 教程

使用HTML和CSS创建圆形加载动画

要创建圆形加载动画，我们可以使用HTML中的<div>元素以及CSS中的动画关键帧（@keyframes）来实现。首先，我们需要使用HTML创建一个<div>元素，并为其设置一个类名，例如loader。然后，在CSS中，我们将使用这个类名来定义圆形加载动画的样式。

下面是一个简单的HTML和CSS代码示例，展示了如何创建一个圆形加载动画：

<!DOCTYPE html>
<html>
<head>
<style>
.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); } /* 设置旋转的起始角度为0度 */
  100% { transform: rotate(360deg); } /* 设置旋转的结束角度为360度，即一圈 */
}
</style>
</head>
<body>

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

</body>
</html>

在上述代码中，我们在<style>标签内定义了一个.loader类，通过设置边框、颜色和动画等属性来创建了一个圆形加载动画。其中，border属性用于设置圆环的颜色和宽度，border-radius属性用于将边框形状设置为圆形，animation属性则定义了旋转动画。通过@keyframes我们可以指定动画关键帧，从而实现旋转的效果。

自定义圆形加载动画

除了上述示例中的默认样式，我们还可以根据需求自定义圆形加载动画的样式。比如，我们可以更改圆环的颜色、宽度、高度，或者甚至添加阴影和渐变效果等。

下面的代码示例展示了一个自定义的圆形加载动画，具有不同的边框颜色、宽度和高度：

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  border: 12px solid #f3f3f3; /* 设置圆环的颜色 */
  border-top: 12px solid #ff00ff; /* 设置圆环的上边框颜色，这里以紫色为例 */
  border-radius: 50%; /* 将边框的形状设置为圆形 */
  width: 80px; /* 设置圆环的宽度 */
  height: 80px; /* 设置圆环的高度 */
  animation: spin 1s linear infinite; /* 设置圆环旋转的动画效果 */
}
</style>
</head>
<body>

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

</body>
</html>