【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究 - ChokCoco
原文中文，约4700字，阅读约需12分钟。
📝
内容提要
本文介绍了如何实现一个卡片Hover动画效果。首先搭建整个静态效果，然后实现渐变色边框效果。接着探究filter: blur()的透明效果。最后利用鼠标移动事件监听配合mask实现整体效果。文章提供了完整的代码示例。
❓
Q&A
如何实现卡片的Hover动画效果？
可以通过搭建静态效果、实现渐变色边框、使用filter: blur()处理虚化图，以及利用鼠标移动事件监听配合mask来实现。
在实现Hover效果时，如何处理鼠标附近的边缘效果？
可以利用遮罩的思想，让遮罩层跟随鼠标移动，从而实现边缘的border和发光效果。
filter: blur()的透明效果是如何实现的？
filter: blur()会使元素从边缘向中心处带有透明衰减的效果，边缘部分逐渐变得透明。
如何使用JavaScript来适配鼠标移动效果？
需要引入JavaScript代码，监听鼠标移动事件，并根据鼠标位置更新mask的中心点。
实现渐变色边框效果需要使用什么技术？
可以使用conic-gradient来实现渐变色边框效果。
如何通过mask实现整体效果？
可以利用radial-gradient()创建径向渐变mask，并监听鼠标移动事件来动态调整mask的中心点。
