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前端开发技术，分享网页相关资源。
---------------------------------------------------------------