【动画进阶】极具创意的鼠标交互动画 - ChokCoco
内容提要
本文介绍了如何使用 CSS 和 JavaScript 创建有趣的鼠标交互效果，包括混合模式和自定义鼠标指针，展示了动态鼠标样式及鼠标悬停时的吸附动画，适合前端开发爱好者。
延伸解读
混合模式实现反相效果
文章利用 mix-blend-mode: difference 让白色伪元素与背景混合，产生反相效果。这种模式比较每个通道的颜色，用较亮值减去较暗值，与白色混合会使底色反相。因此，当鼠标悬停时，叠加的白色块会动态改变元素外观，形成视觉冲击。
自定义鼠标指针与事件透传
通过 cursor: none 隐藏默认指针，并用绝对定位的 div 模拟圆形指针。使用 pointer-events: none 让模拟指针不拦截鼠标事件，确保底层元素的 hover 和 click 正常触发。同时，为指针添加 mix-blend-mode: exclusion 增强视觉效果。
吸附动画的实现逻辑
吸附动画依赖 JavaScript 监听 mouseover 和 mouseout 事件。当鼠标悬停在 .g-animation 元素上时，计算其位置和尺寸，调整外圈指针的宽高、圆角和位移，使其吸附到元素上；离开时恢复原状。外圈指针还带有 transition 延迟，增强动感。
Q&A
如何使用 CSS 和 JavaScript 创建鼠标交互效果？
可以通过混合模式和自定义鼠标指针来实现鼠标交互效果，结合 JavaScript 监听鼠标移动事件来更新指针位置。
什么是混合模式（mix-blend-mode）？
混合模式是一种将多个图层混合以产生新效果的 CSS 属性，能够实现颜色的反相或其他视觉效果。
如何自定义鼠标指针样式？
可以通过设置 CSS 的 cursor 属性为 none 隐藏默认指针，然后使用一个绝对定位的 div 模拟新的鼠标指针。
如何实现鼠标悬停时的吸附动画？
通过监听 mouseover 和 mouseout 事件，计算目标元素的坐标和大小，动态调整外圈鼠标元素的样式来实现吸附效果。
在模拟鼠标指针时如何处理事件触发问题？
需要给模拟指针的元素添加 pointer-events: none，以阻止默认鼠标事件，让事件透传到下面的元素。
如何使用 JavaScript 更新模拟鼠标指针的位置？
通过监听 mousemove 事件，使用 requestAnimationFrame 更新模拟指针的 CSS transform 属性来实时跟随鼠标位置。
