【第3327期】神奇的卡片 Hover 效果与 Blur 的特性探究

文章预览

前言 探讨了如何实现一个具有特殊 Hover 效果和 Blur 特性的卡片动画。今日前端早读课文章由 @SbCo 分享，公号:iCSS 前端趣闻授权。 正文从这开始～～ 【小册】CSS 技术揭秘与实战通关 本文，我们将一起探讨探讨，如下所示的一个卡片 Hover 动画，应该如何实现： 这个效果的几个难点： 1、鼠标移动的过程中，展示当前卡片边缘的 border 以及发光效果； 效果只出现在鼠标附近？这一块的实现方法就有很多种了，可以计算鼠标附近的范围，在范围内去实现的效果，但是这样成本太高了。 转换一下思维，其实也可以利用遮罩的思想。在一开始就已经实现好了整体效果，也就是渐变色的整个边框以及整体的内发光效果，通过遮罩的思想，让整个遮罩层跟随鼠标进行移动。 2、整体的效果需要适配鼠标的移动，跟随鼠标移动，进行效果的切换； 基于上述动图 ………………………………