製作 Loading 效果的利器!!
上一篇
下一篇
步驟
製作網站常常會用到 Loading,雖然網路上一大堆,但是要做一個有自己特色的又很 搞剛。
介紹一個方便的網站:
http://loading.io/
可以同時作出 SVG,CSS 以及 GIF,可以適應各種瀏覽器喔!
步驟
選擇樣式,決定各種參數,下載,就搞定了!!
使用方式簡單到不行,就是選擇下圖中喜歡的樣式。然後不同的樣式會有不同的參數設定。
最後,在選擇要
SVG (IE9 以上才支援)
CSS (IE10 以上才支援,動畫效果則是部分支援)
GIF (算是支援度最高,但是其實品質會稍差!!
不同樣式產生出來的效果
為了更了解差異,就在下面作幾個大家瞧瞧就懂了。如果看不到下面的效果,那你肯定是用 IE 啦!!!
看看下面兩個圖,明顯 SVG 的園畫得比 GIF 好,而且不會有鋸齒產生!! 不過為了要支援 IE 還是只能忍痛了!!!
GIF
SVG
CSS 的部份卡在會被濾掉,大家就自己玩耍囉!
Facebook 討論區載入中...