CSS实现加载中旋转菊花图，通常使用CSS动画和伪元素来创建一个旋转的图标。以下是一个简单的示例：1.使用CSS动画实现旋转菊花图<divclass="spinner"></div>.spinner{width:40px;height:40px;border:4pxsolid#f3f3f3;border-top:4pxsolid#3498db;border-radius:5

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《CSS按钮加载中旋转菊花图怎么实现》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

纯CSS实现按钮加载旋转菊花图：通过0宽高元素+三边实色一边透明的border配合border-radius:50%形成圆环，再用@keyframes定义rotate(360deg)动画实现旋转，结合display切换控制显隐，轻量易复用。

用纯 CSS 实现按钮加载中的旋转菊花图，核心思路是：利用 border 的边框渐变视觉 + @keyframes 控制旋转动画，不依赖图片或 SVG，轻量、易复用。

基础结构：用 border 画出“菊花”雏形

一个常见的做法是创建一个无宽高、仅靠上下左右边框构成的“圆环”。关键点在于：

• 设置元素宽高为 0
• 四边 border 宽度一致（如 4px），但只保留其中三边为实色，一边设为透明（或不同颜色），形成缺口感
• 用 border-radius: 50% 让边框闭合成近似圆形

示例代码：

.loading-spinner {
  width: 0;
  height: 0;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff; /* 高亮顶部边框，形成旋转焦点 */
  border-radius: 50%;
}

添加旋转动画：用 @keyframes + transform

定义一个无限顺时针旋转的动画，作用于该元素：

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-spinner {
  animation: spin 1s linear infinite;
}

注意：必须加 display: inline-block 或 block，否则旋转可能不生效；若按钮内联显示，建议用 vertical-align: middle 对齐文字。

集成到按钮中：状态切换控制显隐

实际使用时，通常通过 JS 切换按钮 class 来启用/禁用 loading 状态。推荐结构如下：

<button class="btn">
  <span class="btn-text">提交</span>
  <span class="btn-loading"></span>
</button>

CSS 控制逻辑：

• 默认隐藏 .btn-loading
• 按钮加 .loading 类时，隐藏文字、显示 loading 元素
• loading 元素本身用上面的 border+animation 样式

示例片段：

.btn-loading {
  display: none;
  width: 0; height: 0;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn.loading .btn-text { display: none; }
.btn.loading .btn-loading { display: inline-block; }

微调与兼容性提示

让效果更自然的小技巧：

• 动画时长建议 0.6s ~ 1s，太快眩晕，太慢显得卡顿
• 边框颜色可用 currentColor，自动继承按钮文字色，适配深色/浅色主题
• 在老版 Safari 中，transform 可能需加 -webkit-transform 前缀（现代项目可忽略）
• 如需更精细控制（比如三段式加载），可扩展为多个 border 层叠或改用伪元素模拟多瓣

基本上就这些 —— 不需要 JS 绘图，不引入额外资源，一行 border + 一段 keyframes，就能跑起来一个干净的 loading 菊花。

本篇关于《CSS实现加载中旋转菊花图，通常使用CSS动画和伪元素来创建一个旋转的图标。以下是一个简单的示例：1.使用CSS动画实现旋转菊花图