元素不动是因为未设置animation属性或漏设transform-origin；必须将@keyframes定义的动画显式绑定到元素，且inline元素需设display:inline-block/block、宽高及border，并配transform-origin:center才能正常旋转。
用 @keyframes 定义旋转动画时，为什么元素不动？
常见原因是没给元素设置 animation 属性，或者漏了 transform-origin。CSS 动画不会自动触发，@keyframes 只是定义动作，必须显式绑定到元素上。另外，如果动画元素是 inline 元素（比如 <span></span>），默认没有宽高，border 画不出圆环，也会看起来“没动”。
实操建议：
- 确保目标元素是
display: inline-block或block，且设置了明确的width和height - 用
border搭配transparent边框模拟菊花：比如border: 3px solid #007bff+border-top-color: transparent - 必须设
transform-origin: center，否则旋转中心可能偏移（尤其在 flex 或绝对定位中容易出错） - 别忘了加浏览器前缀兼容老版 Safari：
-webkit-animation和-webkit-transform
animation 的 timing-function 和 duration 怎么选才不晕？
加载动画太快会闪，太慢显得卡顿。关键不是“越快越好”，而是匹配用户预期：按钮点击后等待响应，通常 0.6–1.2s 最自然；接口超时前的等待，可稍长（1.5s 左右）。ease-in-out 比 linear 更柔和，但纯旋转用 linear 反而更稳——因为人眼对匀速圆周运动更敏感，变速反而易察觉卡顿。
实操建议：
- 优先用
animation: spin 0.8s linear infinite，而非ease类函数 - 避免
animation-delay用于初始加载，它会让菊花“等一下再转”，破坏即时反馈感 - 如果配合请求状态，用 JS 切换 class 控制
animation-play-state: paused/running，比反复增删 class 更轻量
移动端 Safari 上动画卡顿或消失？检查这三点
iOS 15+ 之前，Safari 对 transform: rotate() 的硬件加速支持不稳定，尤其嵌套在 position: fixed 或 overflow: hidden 容器里时，可能直接不渲染动画，或掉帧严重。
实操建议：
- 强制开启 GPU 加速：给动画元素加
transform: translateZ(0)或will-change: transform - 避免父容器设
overflow: hidden—— 它会截断旋转时的绘制区域，菊花像被“切了一角” - 不用
filter（如blur、opacity）和动画同时存在，Safari 会降级到软件渲染
怎么让菊花适配深色模式又不写两套 CSS？
靠 prefers-color-scheme 媒体查询就行，但别只改颜色——深色背景下浅色菊花（比如 #007bff）对比度可能不足，用户根本看不见。真正要适配的是“可见性”，不是“主题色”。
实操建议：
- 用
color-scheme: light dark声明元素支持深色模式，触发系统级优化 - 边框色改用
currentColor，然后通过父级color控制，比如color: oklch(0.6 0.2 250)（比 HSL 更好控亮度） - 深色模式下可略微加大
border-width（如从 2px → 3px），补偿低对比度下的视觉重量
最常被忽略的是动画层级：如果菊花放在 z-index: 1，但在 Modal 背景上又用了 backdrop-filter，iOS 上可能被裁剪。遇到这种问题，先试 z-index: 9999，再查是否父级有 isolation: isolate 缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
