css加载动画代码示例

当我们需要在网页中展示加载过程时，可以使用CSS加载动画来提供用户体验。以下是一个简单的CSS加载动画示例：

HTML代码：

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

CSS代码：

.loader {
  border: 8px solid #f3f3f3; /* 设置加载动画的边框样式 */
  border-top: 8px solid #3498db; /* 设置加载动画的顶部边框样式，可以根据需要修改颜色 */
  border-radius: 50%; /* 将加载动画的形状设置为圆形 */
  width: 60px; /* 设置加载动画的宽度 */
  height: 60px; /* 设置加载动画的高度 */
  animation: spin 2s linear infinite; /* 使用CSS动画让加载动画旋转起来 */
  margin: auto; /* 将加载动画居中显示 */
}

@keyframes spin {
  0% { transform: rotate(0deg); } /* 定义动画的起始状态 */
  100% { transform: rotate(360deg); } /* 定义动画的结束状态 */
}

这个示例中，我们创建了一个div元素，并给它添加了一个名为"loader"的class。然后使用CSS样式设置了加载动画的边框样式、颜色、形状、大小等属性。通过定义名为"spin"的CSS动画，我们让加载动画在2秒内以线性方式无限循环地旋转起来。