製作 Loading 效果的利器!!
  • 4,761 views,
  • 2016-12-27,
  • 上傳者: Kuann Hung,
  •  0
39689eeb5dc5920bf20a13ff33d43861.png製作網站常常會用到 Loading,雖然網路上一大堆,但是要做一個有自己特色的又很 搞剛。
介紹一個方便的網站: http://loading.io/
 
可以同時作出 SVG,CSS 以及 GIF,可以適應各種瀏覽器喔!
步驟
1.
選擇樣式,決定各種參數,下載,就搞定了!!
使用方式簡單到不行,就是選擇下圖中喜歡的樣式。然後不同的樣式會有不同的參數設定。
最後,在選擇要
  • SVG (IE9 以上才支援)
  • CSS (IE10 以上才支援,動畫效果則是部分支援)
  • GIF (算是支援度最高,但是其實品質會稍差!!
2.
不同樣式產生出來的效果
為了更了解差異,就在下面作幾個大家瞧瞧就懂了。如果看不到下面的效果,那你肯定是用 IE 啦!!!
 
看看下面兩個圖,明顯 SVG 的園畫得比 GIF 好,而且不會有鋸齒產生!! 不過為了要支援 IE 還是只能忍痛了!!!
 
GIF SVG
ebc0519198b53f551dbfa2dd660328bf.gif e3cd9c48c485edc9012646d9e77e1c65.svg
 
CSS 的部份卡在會被濾掉,大家就自己玩耍囉!
Facebook 討論區載入中...
資料夾 :
發表時間 :
2016-12-27 12:53:47
觀看數 :
4,761
發表人 :
Kuann Hung
部門 :
老洪的 IT 學習系統
QR Code :