本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！

本文，我们将一起探讨探讨，如下所示的一个卡片 Hover 动画，应该如何实现：

这个效果的几个难点：

鼠标移动的过程中，展示当前卡片边缘的 border 以及发光效果；

效果只出现在鼠标附近？这一块的实现方法就有很多种了，可以计算鼠标附近的范围，在范围内去实现的效果，但是这样成本太高了。
转换一下思维，其实也可以利用遮罩的思想。在一开始就已经实现好了整体效果，也就是渐变色的整个边框以及整体的内发光效果，通过遮罩的思想，让整个遮罩层跟随鼠标进行移动。

整体的效果需要适配鼠标的移动，跟随鼠标移动，进行效果的切换；

基于上述动图中，到目前为止，纯 CSS 在鼠标移动效果跟随上，是没法解决的，这里需要引入一定量的 Javascript 代码。
基于上述难点（1）（2），下面我们就一起看看如何一步一步实现这个效果。
搭建整个静态效果
首先，我们需要搭建整个静态效果。也就是在没任何 hover 的状态下的效果，如下所示：

由于，每张图背后的虚化图效果，应该是基于图片不同而千图千面，因此，不可......