提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
卡片 UI 布局因其多功能性而在网页设计中大受欢迎,适用于展示各种内容。为卡片添加悬停效果不仅能增强视觉吸引力,还能提升用户体验。以下是一些用 CSS 和 JavaScript 实现的优秀卡片悬停效果示例,供你参考。
正文
1.卡片悬停交互
有时候,一次性展示大量内容可能会让用户感到不知所措。这款卡片交互效果就能很好地解决这个问题。卡片初始状态下只有一个简单的标题和背景图片,当你将鼠标悬停在卡片上时,会出现描述性文字和号召性用语。这种效果是通过纯 CSS 实现的,非常简洁。
源码:https://codepen.io/hexagoncircle/pen/XWbWKwL
2.玩家/用户卡
这款卡片 UI 设计灵感来自双面收藏卡,悬停时会显示更多信息。卡片设计简洁明了,色彩丰富,非常适合用来展示数据。
源码:https://codepen.io/alvaromontoro/pen/ebPEWb
3. 卡片轮播
这是对传统旋转木马的创新设计。卡片重叠排列,节省空间。当你将鼠标悬停在某张卡片上时,它会显现出来。虽然这个例子在活跃卡片上显示圆形动画,但你也可以调整它来展示文本或图像。
源码:https://codepen.io/william-goldsworthy/pen/JzVajj
4.卡片颜色变换效果
如果你想让你的卡片 UI 在众多内容中脱颖而出,可以尝试这种悬停效果。卡片初始状态为灰度,当你悬停时,卡片会变成明亮的色彩,并放大显示更详细的内容。这种效果非常吸引眼球。
源码:https://codepen.io/Jhonierpc/pen/MWgBJpy
5.纯 CSS 假日主题折叠卡
这些小卡片更像按钮,但它们的悬停效果非常独特。每张卡片在悬停时会“展开”,显示出视频、文字和号召性用语。尽管卡片很小,但却能够容纳大量内容,同时界面响应速度也非常快。
源码:https://codepen.io/Maza-designDev/pen/KKdmyGb
6.个人资料卡悬停效果
这是一个更加简洁的效果,当你将鼠标悬停在个人资料卡上时,卡片中的照片会放大,同时显示出人物的姓名和社交媒体链接。这种设计简约而不失美感,不会让用户感到信息过载。
源码:https://codepen.io/petegarvin1/pen/YzWBbRx
7.口袋妖怪卡片全息效果
这款效果不仅适合喜欢口袋妖怪的人,还具有令人惊叹的全息视觉效果。每张卡片都使用动画 GIF 和渐变色打造出闪闪发光的效果,尽管这种设计不适合所有场景,但它绝对是独一无二的。
源码:https://codepen.io/simeydotme/pen/PrQKgo
8.个人资料卡片用户界面
在这个片段中,悬停效果只是众多功能中的一部分,但它极具吸引力。个人资料卡底部的标签设计巧妙,允许你在较小的设计元素中放入大量内容,玻璃态的使用也提升了视觉效果。
总结
悬停效果可以为网页设计增添互动性,尤其是在卡片 UI 中实现时,效果更加明显。它们能为静态内容增添个性,上面的例子展示了多种实现方法,不论是微妙的还是显著的,都能根据需求调整。即使是一个风格严谨的网站,也可以从中受益。