提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“卡片聚光灯”(Card Spotlight)效果,也叫聚光悬停(spotlight hover)、指针光晕(pointer glow)、跟随鼠标的光晕(mouse-following glow)或径向渐变悬停(radial gradient hover)。
柔和、淡淡的径向光晕跟随指针在卡片表面移动,指针移入时淡入,移出时淡出。
光晕放在卡片内容的后面,保证文字清晰可读;在触屏设备上则不显示光晕。相似的动效
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
移动指针试试
Cursor Spotlight (光标聚光灯)
别称 Flashlight cursor, Spotlight effect
指针周围的一圈光照亮内容,其余部分保持暗色。
适用场景
首屏大图区、揭示效果
在[应用位置]添加“光标聚光灯”(Cursor Spotlight)效果,也叫手电筒光标(flashlight cursor)或聚光灯效果(spotlight effect)。
一圈柔和的光跟随指针,照亮下方的内容,区域内其余部分保持变暗。
在触屏设备上没有可跟随的指针,改为直接完整点亮显示内容。A
移动指针试试
Glare / Holographic Card (眩光全息卡片)
别称 Glare hover, Glare card, Magic card, Glare
一道明亮的高光像反光一样随指针在卡片表面移动。
适用场景
高级卡片或收藏卡
在[应用位置]添加“眩光全息卡片”(Glare / Holographic Card)效果,也叫 glare card 或 glare hover。
一道柔和明亮的高光随指针在卡片表面移动,像光线在上面反射,同时卡片朝指针方向微微倾斜;指针移开后两者都淡出:平滑而含蓄。
让点击能穿透高光层,保证其下的内容清晰可读;在触屏设备上显示不带高光的卡片。ABCDEFGHIJKL
移动指针试试
Text Reveal Card (文字显现卡片)
别称 Spotlight Text Reveal
在卡片上移动指针时,遮罩边缘或聚光灯下隐藏的文字随之显露。
适用场景
功能卡片
在[应用位置]添加“文字显现卡片”(Text Reveal Card)效果,也叫聚光灯文字显现(spotlight text reveal)。
指针在卡片上移动时,一条竖直边缘紧紧跟随,在一侧露出隐藏的文字:流畅、直接,没有延迟。
在没有指针可跟随的触屏设备上,让拖动或点按也能显示隐藏文字,并让隐藏文字可被屏幕阅读器读取。Spotlight (聚光灯)
别称 Spotlight sweep, Light cone
一道柔和的锥形光或光斑扫入到位,照亮背景的一部分。
适用场景
首屏标题
在[应用位置]添加“聚光灯”(Spotlight)效果,也叫 spotlight sweep 或 light cone。
页面加载时,一道柔和的锥形光从角落斜着扫进来,停在标题上方,到位时逐渐变亮:缓慢而流畅。
只播放一次;如果用户开启了“减少动态效果”(prefers-reduced-motion),则直接显示已照在标题上的光。Hover 中的其他动效
A
将鼠标悬停在上面
Curl (卷角)
别称 Page curl
悬停时,元素的一角像翻页一样卷起。
适用场景
卡片、便签
在[应用位置]添加“卷角”(Curl)悬停效果,也叫翻页卷角(page curl)。
元素的一角像翻页一样平滑地卷起,露出折角的背面,指针移开后再恢复平整。
折角要小,不要遮住重要内容,键盘焦点时也显示同样的效果。A
B
移动指针试试
Direction Aware Hover (方向感知悬停)
别称 Direction-aware overlay
遮罩层从指针进入的一侧滑入,并朝指针离开的一侧滑出。
适用场景
图片画廊、作品集网格
在[应用位置]添加“方向感知悬停”(Direction Aware Hover)效果,也叫方向感知遮罩(direction-aware overlay)。
遮罩层从指针进入的那一侧滑入,再朝指针离开的那一侧滑出:快速、顺滑。
根据指针进入和离开时的位置判断方向;触摸或键盘焦点时则统一使用一个默认方向。ABCDE
移动指针试试
Dock Magnification (程序坞放大)
别称 Dock
指针靠近时,一排图标平滑放大,就像 macOS 的程序坞。
适用场景
图标工具栏、导航
在[应用位置]添加“程序坞放大”(Dock Magnification)效果,也叫程序坞(dock)。
指针越靠近,这一排图标就平滑地放大,最近的图标最大、相邻的图标稍微放大;指针移开后全部恢复原来大小。
图标从固定的基线向上放大;在触摸和键盘操作时,每个图标都要以正常大小正常可用。