悬停效果在功能和时尚之间走着一条微妙的界限。一些设计师将其纯粹视为装饰。对于另一些设计师来说，悬停交互对于导航、品牌和用户参与至关重要。如果策略性地使用，悬停效果可以决定一个困惑的访客和一位转化客户之间的区别。
1. 颜色过渡 — Remix.supply
Remix.supply 是一家销售优质 Framer 模板的企业，在其最重要的行动号召上使用悬停触发的颜色过渡。颜色变化有助于用户理解哪些元素是可交互的，同时也能促使他们更接近转化。
与普遍看法相反，你选择按钮的颜色并不重要。然而，强烈的颜色对比确实很重要——所以要避免灰底黑字按钮。
提示：使用 Framer，你可以通过选择你的组件、打开“悬停”面板并在“填充”设置中设置悬停过渡颜色来重现此效果。Framer 还为你提供了对其他值（如不透明度和边框）的完全控制。
2. 图片缩放 — Martinie Design
Chris Martinie 的作品集使用了微妙的图像缩放来改善画廊导航。由于他的作品集导航主要由图像驱动，这种效果清楚地表明每个作品集图像都是可点击的，并促使用户进行交互以获取更多信息。
如果你在你的网站上添加图像缩放效果，请使用高质量的图像；分辨率较低的图像在放大后可能会显得有颗粒感。保持缩放效果的微妙，这样交互才能感觉精致，并且不会压倒用户的体验。
提示：使用 Framer，你可以使用“悬停效果”面板设置图像缩放。选择你的图像，点击“缩放”，然后微调值以找到合适的平衡。使用 Framer 内置的缓动功能，确保动画流畅并符合你的品牌。
3. 文本转换 — Trifecta
Trifecta，一家位于纽约的成长型工作室，利用悬停效果使其文本具有交互性，将标准标题和段落变为引人入胜的排版。当你将鼠标悬停在不同区域时，文本元素会变为斜体。这种变化快速而流畅，为关键信息增添了视觉趣味，同时保持了可读性。
当你添加文本悬停效果时，请将过渡时间保持在 200 毫秒以下，以保持快速流畅的感觉，并将这些交互限制在你希望引起注意的重要信息上。过多的运动会使你的网站显得繁忙并分散对核心信息的注意力。
提示：使用 Framer，通过选择文本元素、打开“悬停效果”面板并添加斜切效果，可以快速添加文本转换。然后，微调转换值以匹配你的排版样式。
4. 内容揭示 — Claudio Guglieri
旧金山体验设计师 Claudio Guglieri 使用悬停效果让他的联系信息更具吸引力，并避免页面被联系方式淹没。当你将鼠标悬停在“让我们合作”一词上时，它们会平滑地过渡到电子邮件地址，同时附近的箭头颜色也会发生变化。
创建用户友好的内容揭示交互的一个技巧是，确保你的隐藏内容与可见内容具有相同的尺寸，以防止出现突兀的布局变化。此外，通过添加微妙的视觉指示器，如箭头或下划线，可以帮助用户直观地发现你的隐藏内容。
提示：在 Framer 中，你可以通过将两个 motion.div 元素放入一个容器中来创建类似的内容揭示效果。将一个设置为可见，另一个设置为隐藏，然后使用 Motion 的 whileHover prop 在悬停时交换它们的可见性和位置。
5. 阴影效果 — FEASTIE Festival
FEASTIE，一个多伦多音乐节，利用悬停效果为其网站按钮增添深度。他们的 3D 阴影效果将扁平元素转化为更具触感和吸引力的东西（并且与 FEASTIE 70 年代风格的品牌相得益彰）。
在你的设计中添加阴影效果时，请确保所有元素的灯光方向相同，以保持视觉的一致性。你还需要为在页面上看起来抬得更高的元素使用更大的阴影。
提示：使用 Framer，你可以通过元素的“效果”设置，选择“悬停”，然后更改阴影和偏移设置，创建类似的悬停触发阴影。有关更高级的阴影效果，请查看 Framer 的逼真阴影指南。
6. 自定义光标 — Kind Heart Design
Kind Heart，一家设计工作室，使用自定义光标转换来引导用户浏览其作品集。当你浏览 Kind Heart 的项目时，每当你将鼠标悬停在项目上，你的光标就会变成一个标有“查看作品”的按钮。
设计自定义光标时��请保持其轻量且与标准光标大小成比例，以避免扰乱用户的导航流程。确保你的自定义光标与所有可能的背景形成足够的对比，以便始终清晰可见。
提示：你可以使用 Framer 的自定义光标工具创建悬停触发的自定义光标效果。通过设置响应你悬停图层的变体，你可以让自定义光标引导用户执行不同的操作。
7. 边框动画 — Slides Agency
Slides，一家演示文稿设计机构，使用微妙的圆角半径动画来为其项目画廊增添精致感，并向用户明确表示图片是可点击的。当你将鼠标悬停在每个项目上时，边框会柔和地过渡为平滑的曲线。
在实现圆角动画时，保持变化微妙。例如，从 0px 变为 8-12px 足以产生视觉趣味，而不会分散用户注意力。考虑将边框动画与微妙的缩放或阴影转换配对，以增加更大的深度感。
提示：使用 Framer，你可以通过使用 Motion 的布局动画动态转换设计的边框，这允许你在不同的 CSS 值之间进行平滑动画。
8. 速度控制 — Packaly
Packaly，一个零排放运输网络，在其主页上有一个滚动显示客户标志的列表。当你将鼠标悬停在每个标志上时，滚动效果会减慢，从而更容易阅读每个项目。
设计无限滚动动画时，目标是设定一个足够慢以可读但又足够快以显示移动的基础滚动速度。考虑为悬停项目添加微妙的不透明度或缩放效果，以进一步强调活动状态，同时动画减慢。
提示：使用 Framer，你可以使用Ticker 组件来创建此效果。Framer 的设置允许你微调动画在悬停时减慢的程度，帮助你找到完美的平衡。
9. 悬停预览 — Work By Tomorrow
Work By Tomorrow，一家位于温哥华的品牌和设计工作室，使用悬停预览来简化作品集导航。当你将鼠标悬停在项目标题上时，相关图像会弹出，同时还有一个滚动显示的“查看项目”提示，指示是否有专门的项目页面可用。
悬停预览有几个需要避免的风险。首先，如果你的预览图像加载速度太慢，用户可能什么也看不到。其次，如果你的预览触发过于容易，当用户在页面上移动光标时，它们可能会造成混乱的体验。通过快速加载预览图像并添加短暂的悬停延迟，再显示预览来解决这些问题。你还可以使用微妙的淡入动画使过渡看起来更加精致。
提示：你可以在 Framer 中使用Image on Hover Component创建此效果。将此组件叠加在任何元素之上，以在悬停时显示图像。
10. 微动画 — Thibaut Crépelle
3D 和动态设计师 Thibaut Crépelle 的作品集网站页脚有一个键盘式导航菜单。当你将鼠标悬停在任何按键上时，你会看到它向下移动，就像你按下了它一样。这种交互将标准导航变成了令人难忘的东西，同时也展示了 Crépelle 的动态设计专业知识。
设计悬停触发的微动画时，请保持对象的运动微妙且快速，以保持响应迅速的感觉。仅有几个像素的移动通常足以产生令人满意的“按下”效果，同时保持界面整洁。
提示：使用 Framer，你可以通过在 Spline 中设计此类交互式 3D 元素，并将其直接嵌入到你的 Framer 网站中。
11. 3D 悬停效果 — Alejandro Mejias
Alejandro Mejias 是一位自由体验设计师。访问他的主页，你会发现一个响应光标移动的 3D “A”。将鼠标悬停在其上，可以从任何角度查看它，点击时旋转速度会增加。
在设计 3D 光标跟踪元素时，保持旋转范围适度，并应用微妙的缓动以使运动感觉平滑。考虑添加柔和的环境动画，让用户知道该元素是可交互的。
提示：使用 Framer，你可以通过将3D 悬停覆盖添加到任何元素来设计类似的悬停效果。（此覆盖也使元素跟随你的光标移动。）
12. 视频悬停效果 — Deeo Studio
Deeo 是一家位于马里兰州巴尔的摩的设计工作室。在他们以视频为主的主页上，Deeo 没有使用传统的媒体播放器，而是使用了一个自定义光标，让你在悬停时可以暂停或播放每个视频。
设计悬停触发的视频效果时，请确保你的视频针对网络播放进行了优化并预加载，以防止卡顿。添加视觉指示器，如播放和暂停图标，帮助用户无需明确说明即可了解如何操作。
提示：使用 Framer，你可以更进一步，通过创建一个电影式视频按钮，将视频添加到按钮背景中，从而制作出视频悬停效果。
悬停效果的最佳实践
以下是如何创建悬停效果，在提高网站可用性的同时，保持其快速、可访问并反映你的品牌。
1. 有意图地设计
悬停效果应该是你界面的自然延伸。与其仅仅为了让网站看起来漂亮而添加效果，不如创建有目的的交互来指导用户。
从清晰的视觉反馈开始。使用微妙的阴影指示可点击卡片，为按钮使用柔和的颜色变化，以及为交互元素使用平滑的过渡。保持动画快速：用户应该立即感受到他们的操作与网站响应之间的联系。
2. 反映你的品牌
你的品牌个性应该通过你选择的悬停效果来展现。动画时机和缓动是这里的主要变量：专业的服务公司可能会使用快速而精准的效果，而具有更具创意个性的品牌可能会选择更有弹跳力和拉长的动画。
悬停效果可能看起来不是品牌关键的设计元素，但它们很重要。忠于你更广泛的设计语言：每个效果都应该感觉像是你品牌的自然延伸。
3. 提供流畅的性能
保持动画迅速轻巧。力求微妙的动作而非可能导致延迟的复杂过渡。从简单的效果开始，例如颜色变化和微妙的缩放，并在不同设备上测试你的悬停效果，以确保它们响应迅速，不会导致卡顿或延迟。
性能还取决于悬停效果中涉及的其他元素。如果您在悬停状态下使用图像或额外内容，请确保它们经过优化。
4. 确保可访问性
传统的悬停交互在移动设备上不起作用，这意味着你需要有普遍适用的替代触发器（例如按钮或其他基于触摸的触发器）。并且务必不要将重要内容隐藏在悬停状态之后。任何在桌面用户悬停时显示的信息，要么在移动设备上永久可见，要么通过“点击展开”按钮等清晰的交互元素进行访问。
此外，请记住，有些用户在系统设置中启用了“减少动态效果”。使用useReducedMotion 钩子，你可以检测此设置并自动调整或禁用动画。
通过悬停效果改造你的网站
悬停效果有能力将静态网站转化为动态体验，但其真正的影响力来自有目的的实现。专注于创建有意义的交互，以增强用户体验，而不是向每个元素添加效果。
无论是实现微妙的微动画还是大胆的交互状态，Framer 强大的工具包都能让你轻松尝试这些技巧。探索我们分享的示例，结合适用于你品牌的方法，并发现周到的悬停效果如何改变你的数字形象。
如需更多灵感和示例，请查看Framer 图库或在Framer Academy中了解动画和效果。