設計網頁的朋友都知道,當今天要製作網頁載入,或是施工中的動態圖片,就得使用Gif的動態圖示,讓網頁可以生動些,但有用過的朋友都知道,由於Gif支援透明背景,所以可壓在任何的圖片或顏色上,但礙於Gif只支援256色因此圖片時常會出現鋸齒邊緣,因此這時不妨可用SVG+CSS3動畫,來取代Gif的動態圖示,不但能保有高畫質的圖像且還是透明的,最近梅干無意發現到一個相當棒的平台,直接透過線上就產生出SVG Loading動畫,且內建就有各式各樣的Loading樣式,同時還可更改Loading圖示的顏色、大小、速度….等,因此有需的朋友,不妨看看囉!
SVG Loading:
Step1
首先,進到網站後,點一下畫面的下拉選單。
Step2
接著就會看到各式各樣的Loading圖示,再選擇自已喜歡的圖示。
Step3
透過上方的控制選項,就可改變Loading圖示的顏色、大小、速度、背景色…..等。
Step4
都設定完畢後,再點一下GET CODE鈕。
Step5
再將原始碼全部複製起來。
Step6
分別的貼到指定的區塊中,CSS就貼到<head>~</head>間,至於div就貼到<body>~<body>間。
Step7
這樣就可使用啦!是不是超方便的呀!由於SVG是向量檔,因此影像放大縮小都不會失真。