CSS物体阴影跟随动画_模拟光源移动产生的投影变化效果

纯 css 无法真正追踪鼠标，但可通过 :hover + transform 和动态 box-shadow 偏移模拟光源移动错觉；只过渡 offset-x/y 更高效，动画中需单位一致且结构对齐，drop-shadow() 更适配非矩形元素，阴影颜色忌用纯黑。

用 box-shadow 实现阴影跟随鼠标移动的错觉

纯 CSS 无法真正“追踪”鼠标位置，但可以通过 :hover + transform 配合动态 box-shadow 偏移，模拟光源从上方斜射、阴影随交互偏移的效果。关键不是让阴影动起来，而是让人眼觉得光源在动。

• 真实光源移动 = 阴影长度、方向、模糊度都要变；但 CSS 中只建议调 offset-x 和 offset-y，其他参数固定，否则性能差且难控制
• 别用 transition 直接过渡 box-shadow 的全部值——浏览器要重绘整个层，卡顿明显；只过渡偏移量（offset-x/offset-y）更轻量
• 示例：给按钮加「上左光源」感，悬停时阴影往右下偏移：

  .btn {   box-shadow: 0 -2px 8px rgba(0,0,0,0.15);   transition: box-shadow 0.2s ease; } .btn:hover {   box-shadow: 4px 4px 8px rgba(0,0,0,0.2); }

CSS @keyframes 动画里改 box-shadow 偏移不生效？

常见现象是动画跑起来后阴影没动，或者只动了一帧。根本原因是：CSS 动画中 box-shadow 的偏移值必须用相同单位声明（比如全用 px），且起始/结束值结构必须完全一致——不能一个写 0 0 0 #000，另一个写 10px 10px 10px #000。

• 错误写法：from { box-shadow: 0 0 0 #000; } → to { box-shadow: 10px 10px 10px #000; }（缺单位）
• 正确写法：两端都带单位，且顺序、数量、类型对齐：

  @keyframes floatShadow {   from { box-shadow: 0px 0px 6px rgba(0,0,0,0.1); }   to   { box-shadow: 3px 6px 12px rgba(0,0,0,0.2); } }

• 注意：动画中不能混用 em、rem 和 px，也不能一边写颜色一边省略（如 0 0 5px 默认用当前文字色，但动画中必须显式写全）

用 Filter: drop-shadow() 替代 box-shadow 的时机

当元素有圆角、透明背景或非矩形轮廓（比如 clip-path 或 PNG 图像）时，box-shadow 仍按矩形盒子投射，而 filter: drop-shadow() 是按实际像素 Alpha 通道生成阴影，更真实。

• 适用场景：卡片带 border-radius: 12px + overflow: hidden，内部图片溢出；或 SVG 图标需要贴合形状的阴影
• 坑点：drop-shadow() 不支持多层阴影（box-shadow: a b c #000, d e f #333 这种写法它不认），也不响应 inset
• 性能提示：大量使用 filter 会触发 GPU 合成层，低端设备可能掉帧；简单交互动效优先用 box-shadow + 偏移

阴影“浮动感”靠的是对比，不是参数堆砌

人眼判断光源位置，主要依据阴影和物体边缘的相对偏移关系，以及阴影边缘的软硬程度。加再大的 blur 或拉再长的 spread，如果偏移方向反直觉（比如光照来自左上，阴影却往左上跑），就会显得假。

立即学习“前端免费学习笔记（深入）”；

• 通用经验：假设光源在屏幕左上方，则正常阴影应向右下方偏移，且越“远”的物体（z-index 越高），偏移量越大、模糊度越高
• 别为了“立体”强行加多层 box-shadow：两层足够（一层主阴影 + 一层极淡的远距离泛光），再多就是视觉噪音
• 最易忽略的一点：阴影颜色别用纯黑。环境光存在，通常用 rgba(0,0,0,0.12) ~ rgba(0,0,0,0.25) 更自然；深色模式下甚至该用浅灰