Glare / Holographic Card (眩光全息卡片)
别称 Glare hover, Glare card, Magic card, Glare
一道明亮的高光像反光一样随指针在卡片表面移动。
适用场景
高级卡片或收藏卡
变体
- Glare Card
- Glare Hover
- glare option in vanilla-tilt
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“眩光全息卡片”(Glare / Holographic Card)效果，也叫 glare card 或 glare hover。
一道柔和明亮的高光随指针在卡片表面移动，像光线在上面反射，同时卡片朝指针方向微微倾斜；指针移开后两者都淡出：平滑而含蓄。
让点击能穿透高光层，保证其下的内容清晰可读；在触屏设备上显示不带高光的卡片。相似的动效
A
移动指针试试
Card Spotlight (卡片聚光灯)
别称 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
柔和的径向光跟随指针在卡片表面移动，照亮下方的背景。
适用场景
功能卡片、便当网格
在[应用位置]添加“卡片聚光灯”(Card Spotlight)效果，也叫聚光悬停(spotlight hover)、指针光晕(pointer glow)、跟随鼠标的光晕(mouse-following glow)或径向渐变悬停(radial gradient hover)。
柔和、淡淡的径向光晕跟随指针在卡片表面移动，指针移入时淡入，移出时淡出。
光晕放在卡片内容的后面，保证文字清晰可读；在触屏设备上则不显示光晕。ABCDEF
将鼠标悬停在上面
Holographic Text (全息文字)
别称 Holographic Foil Text
文字呈现流转的彩虹箔片反光，随指针或时间移动。
适用场景
高级感卡片
在[应用位置]添加“全息文字”(Holographic Text)悬停效果，也叫全息箔片文字(holographic foil text)。
指针停在文字上时，一道箔片般的彩色光带在字母上缓慢、顺滑地来回滑动；指针移开后，文字恢复原本的朴素样子。
光泽流动的任何时刻文字都要清晰可读；键盘聚焦时也显示同样的效果。A
移动指针试试
3D Tilt (3D倾斜)
别称 Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt
卡片朝指针方向透视旋转，分层内容从表面浮起。
适用场景
产品卡片和价格卡片
在[应用位置]添加“3D倾斜”(3D Tilt)效果，也叫 perspective tilt 或 tilt card。
指针移动时，卡片朝指针方向透视倾斜，内部各层以不同深度从表面浮起；指针移开后平滑地恢复平放：平滑而含蓄。
倾斜幅度要小，保证文字易读；在触屏设备上，以及用户开启了“减少动态效果”(prefers-reduced-motion)时，让卡片保持平放。A
将鼠标悬停在上面
Shine Sweep (扫光)
别称 Sheen, Shiny Button, Shine on Hover, Glint, Shimmer, Shimmer Button
悬停时，一道斜向光带从元素的一侧扫到另一侧。
适用场景
按钮、卡片、徽章
在[应用位置]添加“扫光”(Shine Sweep)悬停效果，也叫光泽(sheen)、闪光按钮(shiny button)、悬停扫光(shine on hover)、闪光(glint)、微光(shimmer)或微光按钮(shimmer button)。
指针停在元素上时，一道柔和的斜向光带从左向右扫过元素，并在短暂停顿后重复。
光带要裁剪在元素内部，指针移开后停止；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则不要播放。3D & Depth 中的其他动效
ABCDEF
点击试试
3D Carousel (3D轮播)
别称 Rotating ring carousel
排成环形的面板在 3D 空间中绕竖直轴旋转。
适用场景
图库和产品展示
在[应用位置]添加“3D轮播”(3D Carousel)，也叫 rotating ring carousel。
把面板排成透视下的环形；每次点击“下一个”，整个环绕竖直轴平滑转动，把下一块面板转到正前方。
控件要能用键盘操作，并向屏幕阅读器播报当前面板；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。3D Globe (3D地球)
别称 Interactive globe
带有标记点或弧线的 3D 地球在页面中旋转。
适用场景
展示全球覆盖的视觉
在[应用位置]添加“3D地球”(3D Globe)，也叫交互式地球(interactive globe)。
表面带几个标记点的地球绕轴缓慢匀速转动，标记点随之一起转：平静而连续。
把它作为装饰，为其展示的信息提供文字替代；移出屏幕时暂停；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就停止旋转。A
将鼠标悬停在上面
3D Pin (3D图钉)
别称 Pin hover 3D
悬停时卡片向后透视倾斜，同时一枚图钉和光晕朝观看者升起。
适用场景
链接预览卡片
在[应用位置]添加“3D图钉”(3D Pin)悬停效果，也叫 pin hover 3D。
指针停在卡片上时，卡片向后透视倾斜，同时一枚底部带柔和光晕的图钉从中心升起；指针移开后一切复原：平滑，不要弹跳。
保持卡片在布局中所占空间不变，键盘焦点时也显示同样的效果。