提示詞
將 [套用位置] 替換成你要套用的位置,再貼給 AI 代理。提示詞中包含動效名稱,下次只要說出名稱就能提出需求。
在[套用位置]加入「自訂游標」(Custom Cursor),也叫動畫游標 (animated cursor) 或游標替換 (cursor replacement)。
用一個精準跟隨游標的小圓點,加上一個稍微落後跟隨的圓環來取代預設箭頭;移到連結和按鈕上時,圓環平順地放大。
在觸控裝置和文字輸入框中保留一般游標,而且自訂游標絕不能擋住點擊。相似的動效
A
移動指標試試
Cursor Follower (游標跟隨)
別稱 Following Pointer, Smooth Cursor, Cursor follow, Spring follow cursor
一個形狀或標籤帶著彈性或緩動的延遲跟隨游標。
適用情境
自訂游標、工具提示
在[套用位置]加入「游標跟隨」(Cursor Follower) 效果,也叫 following pointer 或 smooth cursor。
一個小圓點標記以柔和的緩動延遲跟隨游標,並平順地滑行到游標停下的位置剛好停住,不要彈跳。
保留真正的游標可見,標記絕不能擋住點擊,觸控裝置上不顯示它。AB
移動指標試試
Blend-Mode Cursor (混合模式游標)
別稱 Difference cursor, Inverting cursor
圓形游標透過 mix-blend-mode 的 difference 模式反轉下方的顏色。
適用情境
創意作品集
在[套用位置]加入「混合模式游標」(Blend-Mode Cursor),也叫 difference cursor 或反色游標 (inverting cursor)。
用一個實心圓取代指標,它毫無延遲地緊貼在指標下方,並反轉經過的文字和圖形的顏色。
把混合效果限制在這個區域內,不要和頁面其他部分混合;確保在深色模式下也能清楚反色,觸控裝置上則保留一般游標。移動指標試試
Cursor Trail (游標拖尾)
別稱 Mouse trail
游標移動時,後方留下一串逐漸消失的圖形。
適用情境
活潑有趣的到達頁
在[套用位置]加入「游標拖尾」(Cursor Trail) 效果,也叫滑鼠拖尾 (mouse trail)。
游標移動時,後方留下一小串小圓點,每個點都迅速縮小並淡出,讓拖尾保持短小,順暢地描出移動路徑。
只在游標移動時繪製拖尾,絕不能擋住點擊;在觸控裝置上,或者如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就不要顯示。aBcD
移動指標試試
Adaptive Caret (自適應插入點)
別稱 Cursor: Adaptive caret size
文字插入點會隨旁邊字元的大小變長或變短。
適用情境
編輯器、打字效果
在[套用位置]加入「自適應插入點」(Adaptive Caret) 效果,也叫 adaptive caret size。
文字插入點移到離游標最近的字元前面,並迅速拉長或縮短到與該字元同高,尺寸變化流暢俐落,不要彈跳。
保持文字本身不移動,並讓插入點像跟隨游標一樣跟隨鍵盤移動。Cursor 中的其他動效
A
移動指標試試
Magnetic Button (磁吸按鈕)
別稱 Magnetic target, Magnetic hover
游標靠近時元素被吸向游標,離開後又彈回原位。
適用情境
CTA 按鈕、導覽圖示
在[套用位置]加入「磁吸按鈕」(Magnetic Button) 效果,也叫磁吸目標 (magnetic target) 或磁吸懸停 (magnetic hover)。
游標靠近時,按鈕被輕輕吸向游標,按鈕文字移動得再多一點;游標離開後,按鈕帶著一點小彈跳回到原位。
不要讓周圍版面跟著移動;在觸控裝置上,或者如果使用者開啟了「減少動態效果」(prefers-reduced-motion),就關閉吸附。移動指標試試
一片短線條轉向游標,就像磁鐵周圍的鐵屑。
適用情境
創意背景
在[套用位置]加入「磁吸鐵屑」(Magnetic Filings) 效果。
一組網格排列的短線條立即轉向,每一條都正對游標,就像磁鐵周圍的鐵屑;沒有游標時,全部朝向中心。
把它當成純裝飾背景,絕不能擋住點擊;如果使用者開啟了「減少動態效果」(prefers-reduced-motion),讓線條保持靜止。