怎么利用CSS动画增强Bootstrap 5加载中Spinner的效果？-css教程-PHP中文网

必须给按钮加position: relative和overflow: hidden，spinner用absolute居中、em单位适配尺寸（btn-md用1.5em、btn-sm用1.2em），文字包span并display: none隐藏，配合opacity+visibility双过渡实现平滑切换。

怎么利用css动画增强bootstrap 5加载中spinner的效果？

直接套用 .spinner-border 或 .spinner-grow 类，不加干预地塞进按钮或页面里，90% 的情况会出视觉断裂——不是动画没转，是它跟上下文根本没对齐。

按钮内 Spinner 总偏移、塌陷、文字上跳怎么办

根本原因是 .spinner-border 默认是 display: inline-block，宽高硬编码为 2rem，而按钮高度由 padding + font-size 动态计算，两者盒模型完全脱节。

给 <button></button> 自身加 position: relative 和 overflow: hidden
<div class="spinner-border"> 必须插在按钮内部，并设为 <code>position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
宽高必须用 em：按钮是 btn-md 就设 width: 1.5em; height: 1.5em;；btn-sm 用 1.2em；绝对不要写死 px 或用 scale() 缩放，否则边框模糊、旋转中心漂移
原按钮文字建议包在 <span></span> 里，加载时设 display: none（不是 visibility: hidden），否则按钮宽度会突变

怎么让淡入淡出不闪、不卡、不穿透

直接切 display: none/block 或靠 JS 操作 style.opacity，必然跳帧或点击穿透。真正平滑靠的是 opacity 和 visibility 双过渡 + 精确延迟触发。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

初始状态必须设 opacity: 0; visibility: hidden
淡入：加类如 is-loading，其中 opacity: 1（transition: opacity 0.2s），visibility: visible（transition-delay: 0s）
淡出：移除 is-loading 类，opacity: 0（同上），但 visibility: hidden 必须带 transition-delay: 0.2s，确保透明后才真正不可见、不响应点击
JS 只需切换类名，别反复操作 style，漏掉任一属性都会断链

如何安全修改 Spinner 旋转速度

直接改 animation-duration 不生效，因为 Bootstrap 5 的动画由 @keyframes 驱动，且依赖完整 animation 声明覆盖。

.spinner-border 默认用的是 animation: spinner-border 0.75s linear infinite
.spinner-grow 默认是 animation: spinner-grow 0.75s linear infinite
必须在自定义 CSS（确保在 Bootstrap CSS 之后加载）中重写整条声明：
```
.spinner-border { animation: spinner-border 0.4s linear infinite; }
```
不要只写 animation-duration: 0.4s，它会被原生规则覆盖