SVG新年火柴棍动画

来源：互联网发布：生态环境监测网络建设编辑：程序博客网时间：2024/05/05 20:48

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

7 0