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

梅問題-網設必備-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線上產生器

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    quby4 說道:

    最近看到一個類似功能的網站, 但似乎更強大
    http://loading.io

    除了 CSS 跟 GIF 外他還可以產生 SVG
    參考看看囉

    回應:
    感謝分享
  • 第1梅
    Neight 說道:

    請問如何在Loading完跳到網頁
    大家好像都在教怎麼做動畫….

    回應:
    那部分需整合ajax,讀完動畫就消失並出現什麼畫面