ChokCoco
·
【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究 - ChokCoco
💡
原文中文，约4700字，阅读约需12分钟。
📝
内容提要
本文介绍了如何实现一个卡片Hover动画效果。首先搭建整个静态效果，然后实现渐变色边框效果。接着探究filter: blur()的透明效果。最后利用鼠标移动事件监听配合mask实现整体效果。文章提供了完整的代码示例。
🎯
关键要点
- 本文介绍了卡片Hover动画效果的实现方法。
- 难点包括鼠标移动时展示边缘的border和发光效果，以及效果只在鼠标附近出现。
- 可以利用遮罩思想来实现整体效果，遮罩层跟随鼠标移动。
- 需要引入JavaScript代码来适配鼠标移动效果。
- 首先搭建静态效果，使用filter: blur()处理虚化图。
- 实现渐变色边框效果，使用conic-gradient。
- 探究filter: blur()的透明效果，边缘向中心有透明衰减。
- 利用鼠标移动事件监听和mask实现整体效果。
- 通过radial-gradient()实现径向渐变mask遮罩，监听鼠标移动事件。
- 最终实现了完美的卡片Hover动画效果。
➡️
