17370845950

一个纯CSS实现的旋转加载动画通过HTML的div元素和CSS的@keyframes定义，利用border属性创建环形效果，设置animation实现持续旋转，关键在于仅对border-top设色并应用transform: rotate形成动态视觉，通过调整尺寸、颜色、边框宽度和动画时长可自定义样式，适用于网络请求中的用户反馈提示。

在网页开发中，加载动画能提升用户体验，尤其在网络请求或数据处理时提供视觉反馈。通过 HTML 和 CSS 可以轻松实现一个旋转的进度加载动画，无需 JavaScript 也能完成。

创建基本HTML结构

只需要一个简单的 div 元素作为加载指示器：

这个 div 不需要任何内容，它的样式完全由 CSS 控制。

使用CSS实现旋转动画

通过 CSS 的 @keyframes 定义旋转动画，并用 border 创建环形效果：

说明：

• border 设置为浅色，只有 border-top 为深色，形成“扇形”视觉
• border-radius: 50% 确保元素为圆形
• animation 调用名为 "spin" 的关键帧，持续 1 秒，无限循环
• transform: rotate 实现连续旋转

优化与自定义样式

可以根据设计需求调整动画效果：

• 改变 width 和 height 调整大小
• 修改 border-width 控制环的粗细
• 更换颜色使动画更贴合主题
• 调整 animation-duration 控制转速，数值越小越快

例如，想要更细腻的渐变旋转效果，也可以使用 conic-gradient 配合 animation 实现复杂动效，但上述方法最简单且兼容性好。

基本上就这些。一个轻量、高效、纯 CSS 的加载动画就完成了，适合用于按钮加载、页面占位或异步请求状态提示。不复杂但容易忽略细节，比如只设 border-top 有颜色是关键。