技术博客
很多开发者写 transition: right 0.3s，结果动画不触发——根本原因是：侧边菜单默认是隐藏状态，CSS 中常设为 right: -300px，但若 HTML 元素没显式设置 right（比如靠 position: absolute + top/left 定位），浏览器计算出的初始 right 值是 auto，而 auto 到具体像素值之间无法插值，transition 直接失效。
它不是动画 API，而是 SVG 路径的描边裁剪工具：stroke-dasharray 控制虚线长度和间隔，配合 stroke-dashoffset 移动虚线起始位置，就能让“实线段”看起来在路径上滑动——这就是轨迹追踪效果的本质。
光泽感本质是模拟高光+阴影的物理反射，CSS 里靠 box-shadow 的多层偏移和透明度控制来骗过人眼。不是加得越多越好，通常 2–3 层足够：一层紧贴边缘的浅色高光（正偏移、小模糊），一层稍远的深色压暗（负偏移、稍大模糊），可能再加一层极淡的底层衬托。
因为默认的 box-shadow 动画只在 offset-x 和 offset-y 上线性变化，人眼对深度感知依赖的是阴影大小、模糊度和透明度的协同变化——单靠位移，只是“滑动”，不是“靠近/远离”。
能，而且不需要任何JavaScript。核心是利用 input[type="checkbox"] 的隐藏状态 + label 关联 + ::before/::after 伪元素模拟滑块和轨道。关键不是“画得多像”，而是“点击区域够大、状态切换即时、视觉反馈明确”。
本文介绍如何使用纯 javascript 实现多组下拉菜单的图标状态同步控制：点击时，对应菜单展开并显示向上箭头，收起时显示向下箭头；同时确保其他已展开菜单自动关闭，并同步更新其图标状态。
因为 margin: auto 在绝对定位元素上生效，必须同时满足两个硬性条件：宽高明确 + 四个方向偏移值都设为 0。缺一不可，漏一个就回退成左上角贴边。
关键不是“加汉堡图标”，而是先让默认导航在小屏下不显示，再用媒体查询切回桌面布局。主流做法是：默认移动端样式（折叠态），@media (min-width: 768px) 里恢复横向排列。别反着写，否则在旧版 Safari 或某些安卓 WebView 里容易触发两次重排。
用 position: relative 时，元素仍占原文档流位置，位移不影响其他元素；用 position: absolute 后，元素脱离流，父容器必须设 position: relative 或 absolute 才能以它为参考系。动画起点若需“原地出发再滑走”，选 relative；若要“从屏幕某固定区域飞入”，比如右上角通知，就得用 absolute 配合 top/right 定位。
不是所有 CSS 属性都能被 transition 动画化，写错了就完全没效果，连控制台都不报错，纯靠肉眼“感觉不动”。关键看浏览器是否把该属性列为「可动画化属性」（animatable）。