24個純 CSS 打造的等待動畫圖示 隨取即用

24個純 CSS 打造的等待動畫圖示 隨取即用

網頁處理、運算、傳輸都需要時間,如果讓使用者乾等待,就容易產生當機的錯覺,因此,在這段時間產生一個提示訊息藉此告訴使用者耐心等待是有必要的,而現行網頁最常見的就是使用等待動畫圖示,負責處理到呈現這段時間的呈現,這個動畫可以使用 GIF 圖檔,也可以使用純 CSS 語法打造,24 PURE CSS3 PRELOADERS 這個網站展示了 24個純 CSS 等待動畫圖示,只需在網頁中引用該 CSS 檔案,就可輕易實現等待中使用動畫圖示來提示。
24 PURE CSS3 PRELOADERS 網站資訊

 訂閱關鍵應用,軟體應用技巧再升級 


如何使用 24 PURE CSS3 PRELOADERS 所提供的等待動畫圖示?

1.使用瀏覽器進入 24 PURE CSS3 PRELOADERS 的等待動畫圖示展示網頁。
24個純 CSS 打造的等待動畫圖示 隨取即用

2.接下來轉到 GitHub - MarinaOsadcha/Preloaders 網站下載範例與 CSS 檔案。
24個純 CSS 打造的等待動畫圖示 隨取即用

3.解壓縮下載的檔案後,在欲使用等待動畫圖示的網頁 head 區域中引用該 CSS 檔案。
24個純 CSS 打造的等待動畫圖示 隨取即用



4.找到欲使用的動畫圖示,將其複製到 HTML Body 區快要顯示的位置,後續便可利用 JavaScript 來控制需要呈現的時機。
24個純 CSS 打造的等待動畫圖示 隨取即用

相關文章



 站內搜尋 


˄