【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究 - ChokCoco
原文中文,约4700字,阅读约需12分钟。发表于: 。本文,我们将一起探讨探讨,如下所示的一个卡片 Hover 动画,应该如何实现: 这个效果的几个难点: 鼠标移动的过程中,展示当前卡片边缘的 border 以及发光效果; 效果只出现在鼠标附近?这一块的实现方法就有很多种了,可以计算鼠标附近的范围,在范围内去实现的效果,但是这样成本太高了。 转换一下思
本文介绍了如何实现一个卡片Hover动画效果。首先搭建整个静态效果,然后实现渐变色边框效果。接着探究filter: blur()的透明效果。最后利用鼠标移动事件监听配合mask实现整体效果。文章提供了完整的代码示例。