教你如何制作html5 svg線條動態繪制文字輪廓邊框動畫

SVG路徑動畫在網頁設計中是一項熱門的技術，它允許我們繪制各種簡單、精美的圖標和文字。

先用一張gif圖片看一下我們的結果或點擊這里查看完整的demo：

制作流程：

制作SVG

1、首先你要下載和安裝一款矢量圖形編輯器，推薦使用 Inkscape 。

2、打開Inkscape，創建一個新的文檔。在文檔的左上角創建你的文字。

3、使用選擇工具選取你創建的文字。

4、在Path菜單中，選擇Object --> Path。然后保存為SVG。

5、使用文本編輯器打開你剛才保存的SVG。將一些不需要的標簽去掉，每個路徑只保留path部分即可，見下圖：

CSS樣式

1、創建一個div作為包裹容器包住SVG。給這個div一個id，然后添加下面的css代碼：

#YOUR-SVG-CONTAINER { //ADJUST NAME TO MATCH YOUR ID
  position: relative;
  width: 360px;   //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
  height: 110px;  //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
  margin: 40vh auto 0 auto;
}

2、給你的SVG元素一個id，然后添加下面的CSS代碼：

#svg-canvas { //ADJUST NAME TO MATCH YOUR ID
  position: relative;
  width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
  height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
}

3、確保你的每個路徑元素看起來像下面這樣：

<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5" d="" />

4、在你的樣式表中添加下面的代碼。下面的css代碼將以線條繪制文字輪廓。關於下面代碼的說明請點擊這里。

.title {
    stroke-dasharray: 500;
            stroke-dashoffset: 500;
    animation: draw 5s linear forwards;
    -webkit-animation: draw 8s linear forwards;
    -moz-animation: draw 8s linear forwards;
    -o-animation: draw 8s linear forwards;
    font-weight: bold;
    font-family: Amatic SC;
    -inkscape-font-specification: Amatic SC Bold"
    }
    @keyframes draw {
    to {
        stroke-dashoffset: 0;
        }
    }
    @-webkit-keyframes draw {
    to {
        stroke-dashoffset: 0;
        }
    }
 
    @-moz-keyframes draw {
    to {
        stroke-dashoffset: 0;
        }
    }
    @-o-keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

大功告成！！

下載完整的插件壓縮包：http://www.htmleaf.com/html5/html5donghua/20141203663.html