卡卡網(wǎng)

這是一個(gè)帶有 8 個(gè)加載圖像的 SVG 動(dòng)畫實(shí)例，這個(gè)例子非常適合用作加載(loading)動(dòng)畫。

demodownload

實(shí)例介紹

這幾個(gè)加載動(dòng)畫都是使用 HTML + CSS + SVG 實(shí)現(xiàn)的。

這幾個(gè)加載動(dòng)畫的CSS代碼是一樣的，不同的只是各自的SVG代碼。

下面通過(guò)其中一個(gè)動(dòng)畫來(lái)介紹其實(shí)現(xiàn)方法。

CSS

.loader {
  margin: 0 0 2em;
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
}
/*
  Set the color of the icon
*/
svg path,
svg rect {
  fill: #FF6700;
}

CSS主要是設(shè)置動(dòng)畫顏色，fill: #FF6700; 。

HTML + SVG

<div class="loader loader--style1" title="0">
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
  <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
  <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
    C22.32,8.481,24.301,9.057,26.013,10.047z">
    <animateTransform attributeType="xml"
      attributeName="transform"
      type="rotate"
      from="0 20 20"
      to="360 20 20"
      dur="0.5s"
      repeatCount="indefinite"/>
    </path>
  </svg>
</div>

div 是定位作用，使用CSS類 loader 。

SVG定義動(dòng)畫大?。?code>width="40px" height="40px"

animateTransform 元素是控制動(dòng)畫旋轉(zhuǎn)。

type 有五種類型：分別是rotate（旋轉(zhuǎn)）、scale（縮放）、translate（位移）、skewX（X軸方向偏移）、skewY（Y軸方向偏移）。

from 第一個(gè)參數(shù)代表開(kāi)始角度，第二個(gè)參數(shù)代表X軸開(kāi)始坐標(biāo)，第三個(gè)參數(shù)代表Y軸開(kāi)始坐標(biāo)。

to 第一個(gè)參數(shù)代表結(jié)束角度，第二個(gè)參數(shù)代表X軸結(jié)束坐標(biāo)，第三個(gè)參數(shù)代表Y軸結(jié)束坐標(biāo)。

dur 是設(shè)置動(dòng)畫的速度，我們可以改變?cè)搶傩灾祦?lái)設(shè)置動(dòng)畫的速度。

repeatCount 代表執(zhí)行次數(shù)，默認(rèn)為一次；indefinite 表示無(wú)限次。

以上代碼得到的動(dòng)畫圖像如下

總結(jié)

本文介紹的SVG動(dòng)畫實(shí)例， 都是使用 HTML + CSS + SVG 實(shí)現(xiàn)的，代碼少，使用簡(jiǎn)單，自定義容易，非常適合網(wǎng)頁(yè)某個(gè)應(yīng)用的加載進(jìn)程使用。

您可能對(duì)以下文章也感興趣

• 4個(gè)漂亮的CSS3 Loading預(yù)加載動(dòng)畫實(shí)例
• CSS3 Loading 旋轉(zhuǎn)圓盤加載動(dòng)畫
• CSS3 loading音波效果預(yù)加載動(dòng)畫
• CSS3 Loading預(yù)加載動(dòng)畫8個(gè)常見(jiàn)實(shí)例
• CSS Loading 左右滾動(dòng)加載動(dòng)畫等5實(shí)例【源碼下載】

標(biāo)簽: 加載動(dòng)畫