CSS实现加载中旋转菊花图的方法如下：1.**使用CSS动画**：通过`@keyframes`定义旋转动画。2.**设置按钮样式**：包括背景、边框、内边距等。3.**添加旋转动画**：将动画应用到按钮的某个元素（如图标）上。4.**隐藏文字或显示加载状态**：根据需要切换按钮内容。示例代码：```html加载中按钮.loading-btn{position:relative;padding:10

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《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实现加载中旋转菊花图的方法如下：1.**使用CSS动画**：通过`@keyframes`定义旋转动画。2.**设置按钮样式**：包括背景、边框、内边距等。3.**添加旋转动画**：将动画应用到按钮的某个元素（如图标）上。4.**隐藏文字或显示加载状态**：根据需要切换按钮内容。示例代码：```html加载中按钮.loading-btn{position:relative;padding:10px20px;background-color:#007bff;color:white;border:none;cursor:pointer;font-size:16px;}.loading-btn.loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;border:2pxsolid#fff;border-top:2pxsolidtransparent;border-radius:50%;animation:spin1slinearinfinite;transform:translate(-50%,-50%);}@keyframesspin{0%{transform:rotate(0》文章吧，也可关注golang学习网公众号了解相关技术文章。