設計網頁的朋友都知道,當今天要製作網頁載入,或是施工中的動態圖片,就得使用Gif的動態圖示,讓網頁可以生動些,但有用過的朋友都知道,由於Gif支援透明背景,所以可壓在任何的圖片或顏色上,但礙於Gif只支援256色因此圖片時常會出現鋸齒邊緣,因此這時不妨可用SVG+CSS3動畫,來取代Gif的動態圖示,不但能保有高畫質的圖像且還是透明的,最近梅干無意發現到一個相當棒的平台,直接透過線上就產生出SVG Loading動畫,且內建就有各式各樣的Loading樣式,同時還可更改Loading圖示的顏色、大小、速度….等,因此有需的朋友,不妨看看囉!
SVG Loading:
網站名稱:CSS Load.net
網站網址:http://cssload.net/
網站網址:http://cssload.net/
Step1
首先,進到網站後,點一下畫面的下拉選單。
Step2
接著就會看到各式各樣的Loading圖示,再選擇自已喜歡的圖示。

Step3
透過上方的控制選項,就可改變Loading圖示的顏色、大小、速度、背景色…..等。

Step4
都設定完畢後,再點一下GET CODE鈕。

Step5
再將原始碼全部複製起來。

Step6
分別的貼到指定的區塊中,CSS就貼到<head>~</head>間,至於div就貼到<body>~<body>間。

Step7
這樣就可使用啦!是不是超方便的呀!由於SVG是向量檔,因此影像放大縮小都不會失真。

Switch《寶可夢 Z-A》好啦魷怎麼進化?翻轉螢幕即可進化成烏賊王
Cloudflare Drop 拖曳就能部署網站,還可綁定網域與SSL
線上象棋對戰遊戲室|免註冊立即入座,真人即時對戰
樹莓派系統安裝教學|設定 Raspberry Pi OS、SSH 與首次登入
自製 GA4Exact 外掛,讓 WordPress 後台直接查看 GA4 分析報表
解決 WooCommerce Checkout Block 導致金流模組無法顯示的問題