提示词
将 [应用位置] 替换为你要应用的位置,然后粘贴给 AI 智能体。提示词中包含动效名称,下次只说名称即可提出需求。
在[应用位置]添加“封面流”(Coverflow)轮播,也叫 cover flow carousel。
中间的项目正对前方,两侧的项目透视地转向后方;横向拖动时整排滑动,松手后平滑地停在最近的项目上。
除拖动外还要支持方向键和滑动手势,并保证触屏设备上页面仍能正常纵向滚动。相似的动效
ABCDEF
点击试试
3D Carousel (3D轮播)
别称 Rotating ring carousel
排成环形的面板在 3D 空间中绕竖直轴旋转。
适用场景
图库和产品展示
在[应用位置]添加“3D轮播”(3D Carousel),也叫 rotating ring carousel。
把面板排成透视下的环形;每次点击“下一个”,整个环绕竖直轴平滑转动,把下一块面板转到正前方。
控件要能用键盘操作,并向屏幕阅读器播报当前面板;如果用户开启了“减少动态效果”(prefers-reduced-motion),改用简单的淡入淡出。A
B
C
点击试试
Carousel Slide (轮播滑动)
别称 Slider, Swipe carousel, Scroll-snap carousel
幻灯片在可视区域内水平移动,每次吸附一张到位。
适用场景
首屏横幅、商品图库
在[应用位置]添加“轮播滑动”(Carousel Slide),也叫滑块(slider)或滑动轮播(swipe carousel)。
每一步都让整排横向滑动,使下一张幻灯片吸附到中间,平滑减速;两侧边缘露出相邻的幻灯片,位置圆点也跟着变化。
每次只移动一张,除了按钮和方向键,也支持触屏滑动,并给控件加上供屏幕阅读器读取的标签。A
B
C
Carousel Crossfade (轮播交叉淡化)
别称 Fade slideshow, Carousel fade
幻灯片停在原处,彼此交叉淡化切换,而不是滑动。
适用场景
首屏轮播、用户评价
在[应用位置]添加“轮播交叉淡化”(Carousel Crossfade),也叫淡入淡出幻灯片(fade slideshow)或轮播淡化(carousel fade)。
幻灯片停在原处,缓慢地交叉淡化:旧的一张淡出的同时,下一张淡入,然后停留几秒再切换到下一张。
无缝循环回到第一张,鼠标悬停或获得焦点时暂停;如果用户开启了“减少动态效果”(prefers-reduced-motion),不要自动切换。3D & Depth 中的其他动效
ABCD
点击试试
Cube Rotate (立方体旋转)
别称 3D cube, Cube transition
内容分布在立方体的各个面上,立方体旋转以显示下一个面。
适用场景
轮播切换、功能切换器
在[应用位置]添加“立方体旋转”(Cube Rotate)切换效果,也叫 3D cube 或 cube transition。
把内容放在透视立方体的各个侧面上;每次点击“下一个”,立方体绕竖直轴平滑转动,把下一个面转到正前方。
只让正面能被键盘和屏幕阅读器访问;如果用户开启了“减少动态效果”(prefers-reduced-motion),改用简单的淡入淡出。A
移动指针试试
Glare / Holographic Card (眩光全息卡片)
别称 Glare hover, Glare card, Magic card, Glare
一道明亮的高光像反光一样随指针在卡片表面移动。
适用场景
高级卡片或收藏卡
在[应用位置]添加“眩光全息卡片”(Glare / Holographic Card)效果,也叫 glare card 或 glare hover。
一道柔和明亮的高光随指针在卡片表面移动,像光线在上面反射,同时卡片朝指针方向微微倾斜;指针移开后两者都淡出:平滑而含蓄。
让点击能穿透高光层,保证其下的内容清晰可读;在触屏设备上显示不带高光的卡片。