1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 網設必備-《SVG Loading》線上Loading動態圖示產生器

網設必備-《SVG Loading》線上Loading動態圖示產生器

2014/03/19

梅問題-網設必備-SVG Loading線上產生器

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


SVG Loading:

網站名稱:CSS Load.net
網站網址:http://cssload.net/

Step1
首先,進到網站後,點一下畫面的下拉選單。
梅問題-網設必備-SVG Loading線上產生器


Step2
接著就會看到各式各樣的Loading圖示,再選擇自已喜歡的圖示。
梅問題-網設必備-SVG Loading線上產生器


Step3
透過上方的控制選項,就可改變Loading圖示的顏色、大小、速度、背景色…..等。
梅問題-網設必備-SVG Loading線上產生器


Step4
都設定完畢後,再點一下GET CODE鈕。
梅問題-網設必備-SVG Loading線上產生器


Step5
再將原始碼全部複製起來。
梅問題-網設必備-SVG Loading線上產生器


Step6
分別的貼到指定的區塊中,CSS就貼到<head>~</head>間,至於div就貼到<body>~<body>間。
梅問題-網設必備-SVG Loading線上產生器


Step7
這樣就可使用啦!是不是超方便的呀!由於SVG是向量檔,因此影像放大縮小都不會失真。
梅問題-網設必備-SVG Loading線上產生器