簡短教學
這是一款使用效果非常酷炫的HTML5 SVG文字變形動畫特效。此特效使用SVG和anime.js，透過SVG描邊動畫來完成各種漂亮的字母動畫特效。
使用方法
HTML結構
第一個DEMO的HTML結構如下：
<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
<!--W-->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
<path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
<path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
</g>
</g>
<!--I-->
<g class="letter letter--2">
<g class="letter__part">
<path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
<path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
<path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
</g>
</g>
<!--L-->
<g class="letter letter--3">
<g class="letter__part">
<path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
<path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
<path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
</g>
<g class="letter__part">
<path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
<path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
<path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
</g>
</g>
<!-- ...and so on -->
</svg>CSS樣式
來驅動。 anime.js動畫庫外掛程式可讓我們設定動畫的不同屬性，以及處理不同類型的動畫。這個特效主要有兩種類型的動畫：第一個是各個字母的運動，第二是描邊動畫。描邊動畫使用stroke-dasharray和stroke-dashoffset來完成。/* Main SVG */
.letters {
position: relative;
display: block;
min-height: 400px;
max-height: 70vh;
margin: 0 auto;
}
/* Letter path */
.letter__layer {
fill: none;
stroke-miterlimit: 3;
stroke-linecap: butt;
stroke-linejoin: bevel;
}
/* Styles for effect 1 */
.letters--effect-1 .letter__layer:first-child {
stroke-width: 9px;
}
.letters--effect-1 .letter__layer:nth-child(2) {
stroke-width: 9.5px;
}
.letters--effect-1 .letter__layer:nth-child(3) {
stroke-width: 10px;
}
/* Effect 1 colors */
.color-1 { stroke: #dea521; }
.color-2 { stroke: #f84242; }
.color-3 { stroke: #3758a7; }
.color-4 { stroke: #f79c8c; }
.color-5 { stroke: #84b5bd; }
.color-6 { stroke: #feefde; }
