SVG新年火柴棍動畫

正在學習SVG，弄個2014年的火柴棍動畫，大家先看效果。

這個主要是用到了SVG的內建動畫，大家可以參考msdn上的svg動畫教程。

來看看源碼，每個字用個g實現，每一筆用一個line。

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 60 60" enable-background="new 0 0 52 60" xml:space="preserve"> // 2<g> <line x1="5" y1="5" x2="25" y2="5" > </line> <line x1="25" y1="5" x2="25" y2="25" > </line> <line x1="25" y1="25" x2="5" y2="25" > </line> <line  x1="5" y1="25" x2="5" y2="45" > </line> <line x1="5" y1="45" x2="25" y2="45" > </line></g> // 0<g> <line x1="40" y1="5" x2="60" y2="5" > </line> <line  x1="60" y1="5" x2="60" y2="25" > </line> <line  x1="60" y1="25" x2="60" y2="45" > </line> <line x1="60" y1="45" x2="40" y2="45" > </line> <line x1="40" y1="45" x2="40" y2="25" > </line> <line x1="40" y1="25" x2="40" y2="5" > </line></g>    // 1<g> <line x1="75" y1="5" x2="75" y2="25" > </line> <line  x1="75" y1="25" x2="75" y2="45" > </line></g>  // 4<g> <line x1="90" y1="5" x2="90" y2="25" > </line> <line  x1="90" y1="25" x2="110" y2="25" > </line> <line  x1="110" y1="25" x2="110" y2="5" > </line> <line  x1="110" y1="25" x2="110" y2="45" > </line></g></svg>

CSS賦予樣式

<style type="text/css" >   <![CDATA[    svg{     width:360px;     height:120px;     position:absolute;     top:50%;     left:50%;     transform:translate(-50%,-50%);     -webkit-transform:translate(-50%,-50%);    }    line{     stroke:#B2E04C;     stroke-width:5px;     stroke-linecap:round;     stroke-linejoin:round;     stroke-milerlimit:10;     fill:transparent;     opacity:0;    }    line:nth-child(2n+1){     stroke:#FD5857;    }   ]]>  </style>

添加動畫

<line x1="5" y1="5" x2="25" y2="5" >  <animate attributeType="CSS" attributeName="opacity" from="0" to="1" fill="freeze" begin="0s" dur=".1s" /></line><line x1="25" y1="5" x2="25" y2="25" >  <animate attributeType="CSS" attributeName="opacity" from="0" to="1" fill="freeze" begin=".5s" dur=".1s" />  <animateTransform attributeType="XML" attributeName="transform" type="rotate" from="90 25 5" to="0 25 5" begin=".5s" dur=".5s" additive="replace" fill="freeze"/></line>

整個檔案的源碼就不列出了，請大家到我的codepen線上編輯、下載效果。

---------------------------------------------------------------
前端開發whqet，關注web前端開發技術，分享網頁相關資源。
---------------------------------------------------------------