提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“3D轮播”(3D Carousel),也叫 rotating ring carousel。
把面板排成透视下的环形;每次点击“下一个”,整个环绕竖直轴平滑转动,把下一块面板转到正前方。
控件要能用键盘操作,并向屏幕阅读器播报当前面板;如果用户开启了“减少动态效果”(prefers-reduced-motion),改用简单的淡入淡出。相似的动效
ABCDE
拖动试试
Coverflow (封面流)
别称 Cover flow carousel
中间的项目正对前方,两侧的项目透视斜向后方。
适用场景
专辑和媒体轮播
在[应用位置]添加“封面流”(Coverflow)轮播,也叫 cover flow carousel。
中间的项目正对前方,两侧的项目透视地转向后方;横向拖动时整排滑动,松手后平滑地停在最近的项目上。
除拖动外还要支持方向键和滑动手势,并保证触屏设备上页面仍能正常纵向滚动。A
B
C
点击试试
Carousel Slide (轮播滑动)
别称 Slider, Swipe carousel, Scroll-snap carousel
幻灯片在可视区域内水平移动,每次吸附一张到位。
适用场景
首屏横幅、商品图库
在[应用位置]添加“轮播滑动”(Carousel Slide),也叫滑块(slider)或滑动轮播(swipe carousel)。
每一步都让整排横向滑动,使下一张幻灯片吸附到中间,平滑减速;两侧边缘露出相邻的幻灯片,位置圆点也跟着变化。
每次只移动一张,除了按钮和方向键,也支持触屏滑动,并给控件加上供屏幕阅读器读取的标签。ABCD
点击试试
Cube Rotate (立方体旋转)
别称 3D cube, Cube transition
内容分布在立方体的各个面上,立方体旋转以显示下一个面。
适用场景
轮播切换、功能切换器
在[应用位置]添加“立方体旋转”(Cube Rotate)切换效果,也叫 3D cube 或 cube transition。
把内容放在透视立方体的各个侧面上;每次点击“下一个”,立方体绕竖直轴平滑转动,把下一个面转到正前方。
只让正面能被键盘和屏幕阅读器访问;如果用户开启了“减少动态效果”(prefers-reduced-motion),改用简单的淡入淡出。3D & Depth 中的其他动效
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。
指针停在卡片上时,卡片向后透视倾斜,同时一枚底部带柔和光晕的图钉从中心升起;指针移开后一切复原:平滑,不要弹跳。
保持卡片在布局中所占空间不变,键盘焦点时也显示同样的效果。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)时,让卡片保持平放。