提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「文字變形」(Morphing Text) 效果,也叫 text morph。
一個詞在同一位置變模糊,以柔和、黏稠的方式融合成下一個詞,然後停留片刻再進行下一次切換。
詞語之間無縫循環,讓螢幕閱讀器把這些詞當作一般文字讀出;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止循環。相似的動效
ABDEFGHIJKLDEFMN
Word Rotate (文字輪替)
別稱 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
句子中的一個詞以滑動、翻轉或淡入淡出的方式換成清單中的下一個詞。
適用情境
主視覺標語
在[套用位置]加入「文字輪替」(Word Rotate) 效果,也叫輪替詞 (rotating words) 或翻轉詞 (flip words)。
行內的一個詞向上滑出,清單中的下一個詞從下方滑入,每個詞停留片刻後再切換。
詞寬不同時不要讓這一行的其餘部分跳動,不要讓螢幕閱讀器朗讀每次切換;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就停止輪替。AWBXCYDZ
Text Replacement (文字替換)
別稱 Text Swap
原有文字以動畫方式退出,並被新的文字內容取代。
適用情境
會變化的標籤
在[套用位置]加入「文字替換」(Text Replacement) 效果,也叫文字切換 (text swap)。
文字變化時,舊字元向上滑出,新字元從下方滑入,逐字形成快速而流暢的波動。
切換過程中不要讓文字框尺寸跳動,並且只向螢幕閱讀器朗讀新文字。ABCD
Blur In (模糊入場)
別稱 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
元素從嚴重模糊的狀態逐漸變清晰,常伴隨滑入或淡入。
適用情境
標題和首頁主視覺文字的顯現
在[套用位置]加入「模糊入場」(Blur In) 進場動畫,也叫 text focus in、focus in 或 blur text reveal。
內容從嚴重模糊且透明的狀態開始,在原地逐漸變清晰:柔和、偏慢,沒有位移。
只播放一次;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接顯示清晰的文字。將滑鼠移到上面
Gooey Effect (黏稠融合)
別稱 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
藉由模糊與對比濾鏡,相鄰的形狀像液滴一樣相互融合。
適用情境
選單、游標和分頁
在[套用位置]加入「黏稠融合」(Gooey Effect) 效果,也叫 goo effect 或元球 (metaballs)。
游標移上去時,小液滴像液體一樣從主體拉長後脫離;游標移開後,它們流回來並平順地融合在一起。
模糊加對比濾鏡只套用在這一小組形狀上,不要套用到整個頁面;鍵盤聚焦和點按時也顯示同樣的效果。Text 中的其他動效
ABCDEF
Neon Glow Text (霓虹發光文字)
別稱 Neon Sign Flicker, Glowing Text
文字像霓虹燈管一樣發光,並閃爍或脈動。
適用情境
夜生活、遊戲主題
在[套用位置]加入「霓虹發光文字」(Neon Glow Text) 效果,也叫霓虹招牌閃爍 (neon sign flicker) 或發光文字 (glowing text)。
文字像霓虹燈管一樣發出柔和、穩定的光,偶爾像真實招牌那樣短暫熄滅一下。
閃爍要偶爾出現而不是快速連閃,因為快速閃光可能傷害部分使用者;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持穩定發光。A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
在裡面捲動
Scrolling Letters (捲動字母)
別稱 On-Scroll Letter Animations
使用者捲動經過各個章節時,標題的字母依序變換或移動。
適用情境
章節指示
在[套用位置]加入「捲動字母」(Scrolling Letters) 效果,也叫 on-scroll letter animations。
使用者捲動經過各章節時,標題的字母從左到右依序滾動到下一個字元,並直接跟隨捲動位置變化。
往上捲回時字母要滾回原樣,螢幕閱讀器要以一般文字取得目前的標題。ABC DEFGH
Shimmer Text (微光文字)
別稱 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
一道亮光反覆掃過文字。
適用情境
徽章、公告膠囊標籤
在[套用位置]加入「微光文字」(Shimmer Text) 效果,也叫 animated shiny text 或金屬微光文字 (metallic shimmer text)。
一條光帶從左到右流暢地掃過文字,短暫停頓後再重複。
高光經過時文字仍要清楚可讀;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持靜止。