【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究 - ChokCoco
内容提要
本文介绍了如何实现一个卡片Hover动画效果。首先搭建整个静态效果，然后实现渐变色边框效果。接着探究filter: blur()的透明效果。最后利用鼠标移动事件监听配合mask实现整体效果。文章提供了完整的代码示例。
延伸解读
遮罩跟随鼠标：降低实现复杂度的关键思路
文章指出，若直接计算鼠标附近范围来触发边框和发光效果，成本较高。作者转换思路，先完整实现渐变边框和内发光，再用遮罩层跟随鼠标移动来局部显示。这种“先整体后局部”的策略，避免了复杂的范围计算，也更容易适配鼠标移动的连续性。
filter: blur() 的透明衰减：意外实现内发光
文章通过实验发现，设置 filter: blur() 的元素会从边缘向中心产生透明衰减。利用这一特性，在叠加 conic-gradient 边框时，虚化层边缘的透明过渡自然形成了内发光效果。作者还提醒，高斯模糊会向外扩散，可通过外层容器 overflow: hidden 限制，使衰减更明显。
纯 CSS 的局限与 JavaScript 的引入
文章明确提到，纯 CSS 无法解决鼠标移动跟随问题，因此需要引入 JavaScript 监听 mousemove 事件。通过计算鼠标相对容器的百分比坐标，动态更新 CSS 变量 --x 和 --y，从而移动 radial-gradient 遮罩的中心点。同时，利用 mouseout 事件控制渐变元素的显示与隐藏，实现悬停时出现、离开时消失的效果。
Q&A
如何实现卡片的Hover动画效果？
可以通过搭建静态效果、实现渐变色边框、使用filter: blur()处理虚化图，以及利用鼠标移动事件监听配合mask来实现。
在实现Hover效果时，如何处理鼠标附近的边缘效果？
可以利用遮罩的思想，让遮罩层跟随鼠标移动，从而实现边缘的border和发光效果。
filter: blur()的透明效果是如何实现的？
filter: blur()会使元素从边缘向中心处带有透明衰减的效果，边缘部分逐渐变得透明。
如何使用JavaScript来适配鼠标移动效果？
需要引入JavaScript代码，监听鼠标移动事件，并根据鼠标位置更新mask的中心点。
实现渐变色边框效果需要使用什么技术？
可以使用conic-gradient来实现渐变色边框效果。
如何通过mask实现整体效果？
可以利用radial-gradient()创建径向渐变mask，并监听鼠标移动事件来动态调整mask的中心点。
