網站布局之價格表單設計靈感來源。

發表日期：2015/12/14 15:16:25 文章編輯：瀏覽次數：2774

今天和大家分享一個以SVG圖像為主的loading加載動畫，現在移動端網頁使用比較多，若還用GIF做loading圖片的話，可能會影響圖像的質量，所以使用SVG是一個不錯的方式。

這次展示的代碼由 Aurer 編寫，前端人員只需要直接復制想要的SVG代碼就能直接使用，而且可以改變顏色。當然，對于好學的同學，也可以研究下這個代碼的編寫原理。

保證圖像高清不模糊，用SVG圖像作為loading加載

接下來設計達人網小編為大家講解這個使用方法，其實是相當簡單的。

STEP 1: 復制你想要的SVG加載動畫代碼到里面，小編隨意復制一個代碼如下：

此時代碼已經可以帶動畫了，但沒顏色，請繼續看STEP2添加顏色。

STEP 2 : 為SVG圖像添加顏色

給你的樣式表添加如下樣式，里面的顏色代碼換上你喜歡的即！

svg path,svg rect{fill: #FF6700;}

完成！最終DEMO：

保證圖像高清不模糊，用SVG圖像作為loading加載2

是不是很簡單？若在做HTML5網頁時急用loading動畫圖像，那么使用這次我們分享的動畫代碼，可以快速完成一個SVG加載圖像啦！

代碼名稱：SVG Loading images
實例地址：http://codepen.io/aurer/pen/jEGbA

轉載請注明北京網站建設 www.bbtklxp.cn

標簽：網站設計北京網站設計個性化

將文章分享到..

日本一区二区高清道免费高清字幕,精品国产91高清在线观看不卡,人人爽久久久噜噜噜丁香,性爱视频免费试看网站,中文人妻免费无码区