Learning SVG and getting an animation of Matchstick in 2014. Let's take a look at the effect first.
This mainly uses built-in SVG animation. You can refer to the svg animation tutorial on msdn.
Let's take a look at the source code. Each word is implemented using a g, and each stroke uses a 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 to style
<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>
Add an animation
<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>
The source code of the entire file is not listed. Please go to my codepen to edit and download it online.
---------------------------------------------------------------
Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------