提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「閃爍入場」(Flicker In) 進場動畫。
元素像故障的霓虹燈一樣,以不規則的間隔亮滅幾次後保持點亮:俐落的閃爍,沒有位移。
只播放一次,閃爍次數要少、速度不能太快,確保對光敏感的人也安全;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接以恆亮狀態顯示。相似的動效
ABC
Flicker (閃爍)
別稱 Flickering
元素的不透明度像接觸不良的燈一樣不規則地閃動。
適用情境
霓虹和故障風效果
在[套用位置]加入「閃爍」(Flicker) 效果,也叫 flickering。
元素大部分時間保持穩定,偶爾像接觸不良的霓虹燈一樣短促、不均勻地變暗。
節奏要不規則而非等間隔,避免全強度的快速閃爍;對開啟了「減少動態效果」的使用者則停止。Flash (快閃)
別稱 Blink
元素透過快速切換不透明度來閃爍。
適用情境
提示有新內容
在[套用位置]加入「快閃」(Flash) 提示效果,也叫 blink。
元素快速淡出再淡入,閃爍兩次,然後保持完全可見。
只播放一次,不要無止盡地閃爍;快速閃爍可能讓人不舒服,所以對開啟了「減少動態效果」的使用者則略過。ABCDEF
Neon Glow Text (霓虹發光文字)
別稱 Neon Sign Flicker, Glowing Text
文字像霓虹燈管一樣發光,並閃爍或脈動。
適用情境
夜生活、遊戲主題
在[套用位置]加入「霓虹發光文字」(Neon Glow Text) 效果,也叫霓虹招牌閃爍 (neon sign flicker) 或發光文字 (glowing text)。
文字像霓虹燈管一樣發出柔和、穩定的光,偶爾像真實招牌那樣短暫熄滅一下。
閃爍要偶爾出現而不是快速連閃,因為快速閃光可能傷害部分使用者;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就保持穩定發光。A
Fade In / Fade Out (淡入/淡出)
別稱 Fade
元素在原位從完全透明變為完全不透明,離開時則反過來。
適用情境
彈出視窗、快顯通知和頁面內容的出現
在[套用位置]加入「淡入/淡出」(Fade In / Fade Out) 動畫,也叫 fade。
元素出現時在原位從完全透明變為完全可見,離開時以同樣方式淡出:柔和,不要位移或縮放。
淡出後要確保它無法再被點擊或用鍵盤聚焦;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就瞬間切換。Entrance & Exit 中的其他動效
A
元素繞 Y 軸旋轉一整圈,同時稍微靠近觀看者再退回。
適用情境
吸引注意地展示卡片或徽章
在[套用位置]加入「翻轉」(Flip) 動畫。
元素繞垂直軸旋轉一整圈,同時稍微靠近觀看者,然後尺寸微微一縮再回到原位:活潑但簡短。
加上透視 (perspective) 讓旋轉有縱深感,只播放一次、不要循環;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就省略旋轉。A
Flip In (翻轉入場)
別稱 Flip In X, Flip In Y
元素繞水平軸或垂直軸做 3D 旋轉,從側面朝向轉為正對觀看者。
適用情境
卡片和磚塊的顯現
在[套用位置]加入「翻轉入場」(Flip In) 進場動畫,也叫 flip in X 或 flip in Y。
元素從側面朝向開始,繞水平軸旋轉到正對觀看者,略微轉過頭再回來後穩定:快速,帶一點晃動。
加上透視 (perspective) 讓旋轉有縱深感;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就直接以正面狀態顯示、不做動畫。A
Flip Out (翻轉出場)
別稱 Flip Out X, Flip Out Y
元素做 3D 旋轉,直到側面朝向、看不見為止。
適用情境
移除卡片和磚塊
在[套用位置]加入「翻轉出場」(Flip Out) 退場動畫,也叫 flip out X 或 flip out Y。
元素先稍微向後傾斜,再繞垂直軸旋轉到側面朝向並消失:快速、俐落。
加上透視 (perspective) 讓旋轉有縱深感,等旋轉結束後再移除元素;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就立即隱藏。