HTML & CSS ? 使用SVG圖像作為loading加載 以保證圖像高清不模糊

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

發表于: HTML & CSS, 優秀設計資源. 評論 (2)
Sponsor

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

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

svg-animation-loading

使用教程

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

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

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="0" width="4" height="10" fill="#333" transform="translate(0 15.1665)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="10" y="0" width="4" height="10" fill="#333" transform="translate(0 11.5002)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
<rect x="20" y="0" width="4" height="10" fill="#333" transform="translate(0 1.83315)">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>
</rect>
</svg>

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

STEP 2 : 為SVG圖像添加顏色

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

<style>
svg path,svg rect{fill: #FF6700;}
</style>

完成！最終DEMO：

svg-animation-loading-demo

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

代碼名稱：SVG Loading images
實例地址：http://codepen.io/aurer/pen/jEGbA
推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、、、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

+ 添加評論2 Responses to “使用SVG圖像作為loading加載 以保證圖像高清不模糊”

  1. flying fish - 回復
    2016 年 01 月 19 日 上午 9:16

    其他的幾個load代碼從哪里獲取呀

  2. IvanID - 回復
    2015 年 12 月 15 日 上午 9:59

    非常棒的博客，很多原創內容。


{ 發表評論 }