開始使用 Wix以 Wix 建立網站和商家。歡迎使用我們的 AI 工具來建立網站、自訂範本或雇用專業人員,樹立網上形象。
建立網站了解如何以 Wix 工具建立並管理網站。您也可在此找到更多關於 AI 工具、網站訪客隱私權和無障礙的資訊。
帳戶與帳單檢閱帳戶設定,設定訂閱與方案,查看請款單。
使用 Wix 行動應用程式歡迎使用 Wix 行動應用程式,隨時隨地處理業務,並以專屬應用程式吸引網站會員互動。
連結網域以逐步指南了解如何購買、連結或轉移網站網域,並學習如何確保網站資料安全。
Studio、夥伴與 Enterprise善用 Studio 或 Enterprise 帳戶,以進階功能提升效率。
需要協助?尋找網站與技術支援,了解已知問題,或聯絡我們要求協助。
placeholder-preview-image
Wix Learn以課程和教學加強技能。
Wix 部落格學習網頁設計、行銷等範疇的秘訣。
SEO 學習中心學習如何提升來自搜尋引擎的自然網站流量。
網站開發以全端平台建立自訂網站。
placeholder-preview-image

Studio 編輯器:建立自訂點擊或游標停留互動

新增互動,讓訪客點擊元件或將游標停留在元件上時產生動畫體驗。互動可以套用動畫至觸發互動的元件,或頁面上的任何其他元件。
自訂互動讓您可以充分發揮創意,從零開始設計動畫。還可控制動畫的播放時機,讓動畫真正發揮效果。
前往 Wix Studio 學院,探索更多 Wix Studio 線上講座、教學和課程。

步驟 1|新增觸發條件(點擊或游標停留)

若要開始,請選擇觸發互動的元件。訪客將游標停留在此元件上或點擊元件後,就會看到動畫。接著,前往檢驗器面板新增互動。
提示:
您可為一個元件新增多個互動,讓元件在游標停留或點擊時觸發不同動畫。

新增觸發條件:

  1. 選擇要觸發互動的元件。
  2. 點擊編輯器右上方的「開啟檢驗器」圖示 。
在 Studio 編輯器中開啟檢驗器面板的畫面。
  1. 點擊「動畫與效果」索引標籤 。
  2. 選擇「游標停留」/「點擊」。
  3. 點擊「+新增」。
在檢驗器面板的「動畫與效果」索引標籤中新增游標停留動畫

步驟 2|設定互動

現在可以選擇要套用動畫的元件、要顯示的動畫,以及游標停留或點擊時要執行的確切操作(例如套用動畫、切換開啟/關閉等)。

設定互動:

  1. (在「設定」面板中)從「浮動時」/「點擊時」下拉式選單選擇選項:
    • 開始動畫:點擊元件/將滑鼠游標移至元件上,即可觸發所選動畫。
    • 切換開啟/關閉:效果類似切換開關;點擊元件會觸發動畫,再次點擊則會移除動畫。
    • 重設動畫:點擊元件/將滑鼠游標移至元件上,即可移除先前套用的所有動畫。
  2. 從「動畫元件」下拉式選單選擇選項:
    • 讓元件觸發本身的動畫:點擊元件名稱(旁邊會顯示 (本身))。
    • 讓頁面上的其他元件顯示動畫: 從下拉式選單選擇元件,或點擊「在畫布上選擇」,直接在頁面上選取。
      提示:按住 Cmd/Ctrl 鍵即可選擇子元件。
  3. 點擊「自訂」索引標籤。
  4. 點擊「建立自訂動畫」。
提示:
系統會儲存建立的自訂動畫,方便日後套用至其他元件。
尚未儲存任何動畫時「自訂」索引標籤的畫面截圖

步驟 3|自訂動畫

現在可從頭開始建立動畫。新增各種版面配置和設計轉換,變更元件的大小(縮放)、位置(位移)、角度(旋轉)、填滿色彩等。
您也可以設計元件的初始狀態,與建立的動畫互相搭配。這是元件載入後、訪客與其互動前的顯示方式。最後,設定動畫的持續時間和緩動效果,即可完成動畫。

若要自訂動畫:

  1. 選擇自訂動畫的方式:
2. (選填)點擊浮動列上的 播放,即可預覽動畫。
3. 準備就緒後,點擊「完成」。
顯示畫布動畫預覽的 GIF
提示:
將元件設為點擊或浮動時顯示後,該元件會在畫布上顯示棋盤格覆蓋層,表示元件一開始為透明。
A button set to appear on hover, appearing with a checkered overlay on the canvas in the Studio Editor
可隨時關閉此標示。點擊「Wix Studio」圖示 ,將滑鼠游標移至「查看」,然後點擊「透明元件」。

常見問題

點擊下方即可深入了解如何建立互動。