圆形按钮过渡效果需将transition写在默认状态而非:hover中，显式声明初始值，仅对opacity、transform等可动画属性使用，并确保宽高等比。
直接用 border-radius: 50% + transition 就能做出圆形按钮的过渡效果，但常见问题不是“做不出来”，而是“动得不对”或“移开时突兀跳回”——根源几乎都出在 transition 的声明位置和属性选择上。
transition 必须写在基础样式里，不能只放 :hover 中
这是最常踩的坑：鼠标悬停时动画正常，一移开就“啪”一下瞬间还原。因为浏览器只在 :hover 触发时才读取该规则，离开后规则失效，自然没退出动画。
-
transition必须写在按钮默认状态（比如.circle-btn或button.circle）中，确保进出双向都生效 - 哪怕只动一个属性，也要保证基础态和悬停态都有明确值，例如
transform: scale(1)→scale(1.05) - 别依赖
transform默认值；不显式写transform: scale(1)，移出时可能残留计算值，导致缩放不归位
只对可动画化属性用 transition，别碰 background-image 或 display
background-color 能动，background-image: linear-gradient() 不能动——CSS 标准里它属于非插值类型，写了 transition: background 0.3s 也完全没反应。
- 安全可动的属性：
opacity、transform（首选，触发 GPU 加速）、background-color、color、border-color - 慎用：
width/height（触发重排）、max-height（必须设具体数值，不能用auto） - 明确无效：
display、font-size、z-index、margin、padding—— 写了也不报错，但就是不动
圆形按钮必须宽高等比，否则 border-radius: 50% 会失效
border-radius: 50% 是按各自方向的尺寸百分比算的：水平方向按宽度算，垂直方向按高度算。如果宽高不等，出来的不是圆，是椭圆或“压扁的圆角”。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 正圆按钮：必须同时满足
width和height完全相等 +border-radius: 50% - 响应式正圆：用
aspect-ratio: 1 / 1替代固定像素宽高（注意兼容性：Chrome 88+、Firefox 89+、Safari 15.4+） - button 默认是 inline 元素，
width/height不生效，记得加display: inline-block或display: block - 用
padding控制尺寸更灵活，但要确保左右 padding ≈ 上下 padding × 2（如padding: 16px 32px），否则容易拉成椭圆
推荐组合：transform + opacity，比纯 background-color 更稳
纯背景色过渡在深色模式切换或低端设备上容易卡顿，且视觉反馈偏弱。用 transform 做微缩放 + opacity 做轻微明暗变化，硬件加速更顺滑，也更符合现代 UI 直觉。
示例：
.circle-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #4A90E2;
opacity: 1;
transform: scale(1);
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.circle-btn:hover {
opacity: 0.9;
transform: scale(1.05) translateY(-1px);
}
真正难的不是写出这段代码，而是记住：每次改 transition 前，先确认它在哪个选择器里、动的是不是可动画属性、基础态有没有显式声明初始值——这三个点漏掉任何一个，动画就会“看起来没问题，实际用起来总差一口气”。
