提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 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。
一道柔和明亮的高光隨游標在卡片表面移動,像光線在上面反射,同時卡片朝游標方向微微傾斜;游標移開後兩者都淡出:平順而含蓄。
讓點擊能穿透高光層,確保底下的內容清楚易讀;在觸控裝置上顯示不帶高光的卡片。