手把手教你輕松實現SVG動畫

VG 是基于 XML 的矢量圖形描述語言，可以近似理解成 HTML，所以能和 JS 以及 CSS 進行交互。特別是 CSS，配合 CSS Animation 就能實現一些令人心曠神怡的動畫，這實在是讓人興奮。下面我們就來看看 SVG 配合 CSS 實現動畫的一些方法。

本文內容主要是我之前分享的文字版，若想看重點的話可以看之前的 Slide：https://ppt.baomitu.com/d/9037b180 也可以查看分享視頻：http://cloud.live.360vcloud.net/theater/play?roomid=2079

1. 動畫方式

動畫的本質可以看做是元素從 A 狀態過渡變化到 B 狀態的過程。實現 SVG 動畫主要有以下幾種方式：

1.1 SMIL

SMIL 全稱 Synchronized Multimedia Integration Language，該語言被 SVG 原生支持，主要使用標簽來描述動畫。據傳，由于性能的問題以及 CSS Animation 越來越強大，Chrome 會在未來的版本中廢棄對 SMIL 的支持。不過 MDN 上的聲明卻說 Chrome 推遲了廢棄時間，也不知道是什么情況。總而言之，被 Chrome 這么一搞還是不推薦大家入門 SMIL 了。

Although Chrome 45 deprecated SMIL in favor of CSS animations and Web animations, the Chrome developers have since suspended that deprecation.
via: SVG animation with SMIL

如果已經使用了 SMIL 也不必特別擔心，目前網上有 SMIL 的 JS Polyfill 方案，有需要的可以看看 https://github.com/ericwilligers/svg-animation 這個項目。

1.2 JavaScript

使用 JS 來操作 SVG 動畫自不必多說，網上已經有很多現成的類庫。例如老牌的 Snap.svg 以及 anime.js，都能讓我們快速制作 SVG 動畫。當然，除了這些類庫，HTML 本身也有原生的 Web Animation 實現。使用 Web Animation 也能讓我們方便快捷地制作動畫。

1.3 CSS3

這里主要是使用 CSS3 動畫三劍客(animation, transform, transition)來實現動畫。優點不言自明，它比 JS 更加簡單方便，關鍵幀的配合可以讓其實現很多復雜的動畫。

本文主要就從 CSS3 的角度來描述 SVG 動畫的方法。

2. 動畫方法

動畫可以拆成兩部分，起始狀態和終止狀態是一部分，兩態中間的過渡是另一部分。對過渡感興趣的同學可以去看看月影老師的動畫原理與實現的分享。而兩態的變換，簡單的來說可以分為變換和變形兩種，即線性變換和非線性變換。

2.1 變換動畫

2.1.1 平移變換

平移變換主要是利用 translate 等方法讓元素移動位置達到的動畫，只要善于使用，簡單的移動也能做出不錯的動效，例如下面的例子：

在線預覽：https://code.h5jun.com/dac/4

這里有一個小技巧，就是在元素移動的起點和終點分別設置標記元素。使用 getClientRects() 方法獲取標記元素的絕對位置，通過計算標記元素的位置差，換算成平移的距離。這樣利用純 CSS 就實現了位置移動的有趣動畫。

2.1.2 旋轉變換

旋轉變換是使用 rotate 方法讓元素進行旋轉。使用時請注意：旋轉圓心默認在 SVG 的左上角。可以通過設置 transform-origin 來修改圓心。本質上是將設置的圓心移動到坐標原點后再旋轉再平移回來的一個效果，所以其實以下兩種寫法是等同的：

/** transform-origin **/
.rotate {
 transform: rotate(45deg);
 transform-origin: 100px 100px;
}
/** translate **/
.rotate {
 transform: translate(-100px, -100px)
 rotate(45deg)
 translate(100px, 100px);
}

由于旋轉圓心如此重要，所以正如下面的這個例子，我們首要確認的是旋轉圓心，剩下的就是簡單的旋轉角度的控制問題了。

在線預覽：https://code.h5jun.com/bec/1

2.1.3 縮放變換

縮放變換則是使用 scale 方法讓元素進行變大變小, 它的本質實際上是元素點 (x, y) 被乘以縮放系數了，即 (x * sacle, y * scale)。所以當設置了 transform: scale(2) 時，它相當于元素所有的坐標點變成 (2x, 2y) 了。

講的這么詳細主要是想讓大家注意一個問題，當放大系數為負數的時候，例如 -1 那元素坐標點就會變成 (-x, -y)，這就相當于元素針對橫縱坐標分別做了一次鏡像。對于一些需要實現鏡像效果的元素這招就再簡單不過了。

在線預覽：https://code.h5jun.com/kul

2.1.4 斜歪變換

斜歪變換是使用 skew 方法使元素進行傾斜變形的方法。使用起來也是比較簡單的，不過由于使用次數不是很多，本文這里就略過不表了。若有不清楚的同學可以上 MDN 或者 Google 搜索一下。

在線預覽：https://code.h5jun.com/xaw/1

2.1.5 矩陣變換

矩陣變換是所有變換方法的底層實現，上述變換方法都是矩陣變換某個方向的特例，完全可以使用矩陣變換實現。矩陣變換的使用方法就不多介紹了，不清楚的可以查下文檔。一個 2D 的矩陣變換如下所示：

關于為何使用矩陣來進行矩陣變換計算，感興趣的小伙伴可以參考《從矩陣與空間操作的關系理解CSS3的transform》，這篇文章淺顯易懂的解釋了使用矩陣表示的精妙之處。

在線預覽：https://code.h5jun.com/dafa

2.2 變形動畫

變形動畫即非線性變換動畫，本文主要講述描邊，路徑軌跡和路徑變形三種變形動畫。

2.2.1 描邊動畫

描邊動畫算是經典的 SVG 動畫了，給人一種繪畫的視覺效果，所以描邊動畫的名字因此得來。它主要是利用 Path 的描邊長度 stroke-dasharray 配合描邊起始位置偏移量 stroke-dashoffset 來實現的動畫。首先設置 stroke-dasharray 等于路徑長度，然后將 stroke-dashoffset 從路徑長度減少到 0 ，就完成了一次描邊。

可以看到，描邊動畫其實主要在于設置描邊的長度，除了在 AI/Sketch 等軟件中獲取路徑長度外，我們還可以使用 JS 的 getTotalLength() 方法獲取。除了使用 CSS3 Animation 來實現動畫外，我們也可以使用 JS 來繪制動畫，網上有很多現成的類庫。其中比較推薦大家使用 drawsvg 這款描邊庫，能簡單快速地實現很多復雜的描邊特效。

在線預覽：https://code.h5jun.com/nebu/1

2.2.2 路徑軌跡動畫

路徑軌跡動畫簡單來說就是讓元素沿著某條路徑進行運動的動畫。如果用其它方法實現這個效果的話可能會略復雜，但是用 SVG 就非常得心應手了，有多種方法能用來快速實現。使用原生的 SMIL <animateMotion> 標簽，或者 CSS3 的 offset-path 屬性，亦或是使用 JS 動態計算都是可以的。其中 SMIL 和 CSS3 的實現方法非常類似，這里主要說一下 CSS3 方法。

簡單來說，設置 offset-path 屬性為某一條 Path 路徑，然后通過改變 offset-distance 的距離值，就可以實現元素沿著 offset-path 運動的動畫。這種搭配方法讓人不由得想到了描邊動畫。至于 offset-path 屬性的前世今生，可以參考張鑫旭老師的《使用CSS offset-path讓元素沿著不規則路徑運動》。

在線預覽：https://code.h5jun.com/cora/1

2.2.3 路徑變形動畫

嚴格意義上，路徑變形動畫才真正算的上“變形”動畫，它表示的是路徑之間不規則變化的動畫。從 A 路徑變形成 B 路徑，我們現在可以直接使用 CSS3 Animation 來實現，瀏覽器會自動幫我們做補間動畫。當然我們也可以使用一些 JS 庫例如 Snap.SVG 來制作。

不管是使用 CSS3 還是使用 Snap.SVG，都需要注意一個問題，那就是兩條變形路徑內的描點數需要保證一致，而且需要都是簡單的描點，不能存在弧線等高級描點。這么實現的原因很好理解，能夠極大減少補間動畫的運算量，本質上可以歸類為每個描點的平移動畫。

但是這種限制對于開發者來說還是頗為麻煩的，所以很多類庫就想要解決這個問題。其中比較著名的有 GreenSock，它們編寫的 GSAP 插件據說能夠對路徑進行任意變形，從官網首頁的動畫也可窺見一二。另外一款插件是 SVG Morpheus，也能實現同樣的效果，不過可能因為算法的問題，補間動畫似乎并沒有 GSAP 那么流暢。另外最近騰訊 AlloyTeam 發布了一款插件 Pasition ，用來實現路徑過渡效果，使用起來也很方便，感興趣的同學可以試一試！

在線預覽：https://code.h5jun.com/mugi/1

2.3 后記

本文只是涉獵了一些常用的變換方法以及一些基本的變形動畫，SVG 還有很多例如遮罩、濾鏡、填充動畫方法，感興趣的同學可以去了解下，都能實現非常有趣的動畫特效。不過萬變不離其宗，只要你富有想象力，能夠設計出一些別出心裁的動效，即使只使用上文提及的一些簡單的動畫方法，我相信最終的動效也一定是非常有意思的！

學習資料

SVG 動畫實現@CSS Conf 2016
SVG Tutorial
張鑫旭的技術博客
w3cplus
SVG 開發與應用
https://segmentfault.com/a/1190000009378881
@優秀網頁設計
codepen.io

源：眾成翻譯譯者：betsey

游戲的靈感

在使用過一段時間的SVG動畫之后，我相當清楚如何利用它來制作動畫片段或者網頁布局。一些動畫庫平臺，例如Greensock，和原生的CSS動畫簡直是絕配。于是我便打算深入地研究一下，看看我能否用這些來制作一款簡單的游戲。就像一個精美的工藝品一樣，好的游戲擁有許多細致的動畫細節。有一天夜里，我的腦海中突然閃現了一個游戲的靈感，我馬上起來，畫了一些草圖，之后給我的哥哥看--他是一個專業的網頁設計師。我們立即開始著手設計，討論了所有的細節動畫后（試著畫出來并且配以音效），我便開始進行游戲開發。

如何玩: 來回彈跳的球是可以改變顏色的。你必須隨時觀察球當前的顏色，并且在球和柱子相接觸的一瞬間，確保兩者的顏色是一樣的。點擊柱子可以改變它的顏色，單擊變紅，雙擊變黃，三擊則變為紫色。

這里是游戲的完整版: http://codepen.io/gregh/full/yVLOyO

創作的過程

在開發這款游戲的過程中，我不斷地遇到問題并重構代碼。其中的一個最主要的問題就是，如何能讓游戲在所有的設備和所有尺寸的顯示器上都看起來不錯。我使用我的Macbook Pro 開發，游戲的畫面很棒。但是當到了 27" iMac screen 上時，整個畫面就看起來特別小，當然在iPhone又會顯得特別大。我真心地希望可以有一把適配所有設備的“萬能鑰匙”。經過了許多次的嘗試之后，我清楚地意識到，傳統的使用媒體查詢的技術來做響應式設計是行不通的。

這篇文章并不是一個教程，因此我將不會逐行的解釋我的代碼。但是，我會展示給你一些十分酷的東西，你可以通過在CodePen上或者是在瀏覽器的調試工具里面修改參數進行測試。同樣，我也會在相應的地方寫出一些參考資料。在CodePen上，我盡可能多的寫出代碼注釋，趕快去看看代碼吧！

十分強大的GSAP讓我理所當然地選擇了它，而我選擇在CodePen上面寫碼的原因是它內置了一個Babel編譯器，這樣我就可以在上面書寫ES6的語法，你不知道Class和箭頭函數有多好用！關于ES6的特性介紹，你可以點擊這里: https://github.com/DrkSephy/es6-cheatsheet

使用GreenSock制作動畫

我下面假設你熟悉GSAP用法,但如果你不熟悉的話，你可以看下這個“討厭番茄”的人的關于GSAP的教程。https://ihatetomatoes.net/get-greensock-101/

背景動畫

幾乎所有你能在背景上看到的東西都是用SVG制作的。每個波浪是一個獨立的<div>,每一層的山峰也是一個<div>,甚至云也是<div>。當你在制作一個復雜的動畫時，有一點是需要注意的。你完全可以使用一整個SVG當做背景，然后為這個SVG的子元素和路徑來制作動畫。Greensock允許我們這樣做，你需要做的僅僅是為這些SVG的元素（比如說path，group等等）分配一些ID，然后用過ID選擇到他們。但這樣做的問題在于，在移動設備上，這些動畫跑不動。所以你最好是把這些背景元素放在獨立的<div>里面，然后為這些<div>添加動畫，我實際上就是使用這些SVG的作為背景。

通過類似于上面的代碼，我們就得到了一些簡單的補間動畫。這些動畫可以將背景水平地移動54個像素（也就是背景的寬度），在這里我們想要背景勻速地移動，所以我們不需要緩動動畫。當我們為每個背景設置不同的移動速度的時候，他們就有表現出了視覺差的效果，看上去很酷吧！

看到畫面上漂浮著一些白色的小圓點了沒？我創造了這些圓點并為他們設置了隨機的位置和尺寸，接著我讓他們做圓周運動。

這樣他們就緩慢地進行圓周運動，但看上去卻像隨機運動一樣。

柱子動畫

每一個柱子里都有一些會動的小元素，這些小元素僅僅是由HTML和CSS制作出來的。使用SASS可以節省很多時間和代碼量（通常情況下是這樣的）。我通過創建形狀的mixins來為這些柱子里面的小東西添加效果。如果我們看下bublble這個效果的代碼，我們就會發現每個圓圈都使用了絕對定位并使用到了這個mixin。在CSS中創造三角形需要很多的代碼，所以mixin就派上了大用場。

讓我們看看紅色的柱子，柱子里面包含著很多的氣泡：

所以現在，如果想要在柱子里面創造一些氣泡的話，我只需要調用這些mixin，設置氣泡的大小，然后讓把他們放在柱子的特定的位置上就好了：

當你需要通過邊框來制作一些小的三角形的時候，你需要用大概20行的css代碼來生成，所以使用mixin實在是太有必要了。

氣泡的動畫

我使用交錯動畫來做這個效果。這個動畫可以操控柱子里面所有的氣泡元素，并且可以讓每個氣泡有一個小小的延時，讓他們不會同時開始運動。點擊這個鏈接，你可以了解更多的關于交錯動畫的知識:http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/

三角形的動畫

在黃色的柱子里面，我使用到了旋轉的效果。但是你可能注意到，有些旋轉是圍繞著X軸的，有些是圍繞著Y軸進行運動的。我們在這里使用到了 cycle屬性。

方塊的動畫

在制作方塊的動畫的時候，我們也使用到了相同的技術。因此，有一半的方塊是從左向右移動的，而另外一般則做反方向的運動。

分數的動畫

讓我們點擊重新開始，再看下這個動畫吧.

我想要分數的動畫有一種“Q彈”的感覺，于是我就寫了幾行代碼來形成這個效果。

為了做出這種“觸電”（或者說是“Q彈”）的效果，我們需要制作正確的緩動動畫。如果你想要看看你可以使用什么樣的緩動方程，看下 Greensock 緩動觀察器:http://greensock.com/ease-visualizer 選擇 Elastic 并調整配置參數，你就可以實時地看運動效果。

彈性盒子

這款游戲的第一個創新性就是使用了“彈性盒子”，如果要是不了解彈性盒子的話，你可以閱讀下這篇優秀的文章： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 或者看下 Laracasts上的相關系列。一旦你開始使用了彈性盒子，你就再也離不開它。下面我們看下我的的主菜單界面和游戲界面吧。

開始游戲的容器CSS樣式如下：

“flex-direction: column”表示在容器內部彈性元素的排列方向。設置為Column，則元素從上到下依次排列。而默認的（row）則將元素從左到右排列。彈性盒子可以這只空白區域，我們可以設定我們是在元素的前面、后面或者周圍放置這些空白區域。動手試下，感受下彈性盒子是多么好玩吧！因為我們設置成了“space-between”，所以 Top 被放在了頂部， How to Play被放在了底部，而Logo Holder則放在了中間，空白區域被填充在了這些元素之間。 Align-items: center, 定于交叉軸（這個游戲中代表水平軸）上元素的對齊方式，center表示居中對齊。其中 How to Play也是一個彈性盒子，它的代碼如下:

它也是一個flex元素，我們如果去設定他的flex-direction, 它將使用默認值（row），將其中的三個彈性元素水平的排列。第一個和第三個元素的“flex”參數為1，因此他們將占據所有的空白空間，flex是一個相當高端的特性。同樣的，你也可以通過在How to Play上設置 justify-content: space-around來達到同樣的目的.我使用flex: 1 的原因是，我想讓中間的一列排在屏幕的最中央。

下面我們看下游戲界面。這個界面也是一個彈性布局。界面有一個柱子容器和一個球的容器。我不想讓球是絕對定位的，因為我通過css讓球剛好坐在柱子上，這樣即使我改變柱子的高度，我也不需要改動其他代碼就可以讓球恰好落到柱子上。因此我將容器的flex-direction設置為 column,正如我所愿，球容器剛好緊挨著柱子的頂部。justify-content: space-between讓球的容器永遠靠著屏幕的頂部，而柱子容器永遠靠著屏幕的底部。現在我們給球的容器如下的樣式:

球的容器也是彈性布局，我們將flex方向設為column（這樣Y軸成為了主軸，元素從上到下排列）。之后我們通過 justify-content: flex-end將球推到了容器的底部，因此，我們便得到了兩個緊密排列的容器，并且第一個容器的內部元素被推到了該容器的最下面，這樣我們便做到了讓球坐在了柱子上的效果。

試想下，如果我們不使用彈性布局會怎么做？我們也許會使用到floats, width: 33.33333% ，position: absolute 和 bottom: 0，我的天啊！ Flexbox讓整個界面變得如此整潔有條理，寫碼簡直爽翻了.

讓游戲界面可縮放

做這個游戲，最重要的事情是讓畫面變得可縮放。看下這款游戲在不同尺寸的屏幕上達到了完美的效果！如同我說的，我僅僅是使用了 CSS transform，這樣做具有它獨特的挑戰性。假如游戲的默認大小是 1200x800px.嗎，如果你的屏幕大小和這個不一樣的話，你需要通過調節系數讓游戲的容器變得大一些或者小一些，也就是做個計算"screenHeight/800\".當然，如果設備的高度大于寬度的時候（當我們的平板或者手機處于垂直模式的時候）我們也需要相應地縮放我們的屏幕，下面是計算縮放比例的代碼 :

顯然僅僅是這樣做不能讓視覺體驗變得完美，所以我們需要在縮小我們的游戲界面的同時讓它垂直水平居中。

因此，我們需要讓整個游戲的容器以相同的尺寸放大，這樣當縮放界面的時候，容器可以100%的占據屏幕的尺寸。如果我們將界面縮小到原始尺寸的一半的時候，我們需要讓它的容器放大到原來的兩倍大小，這樣容器便可以充滿整個屏幕。相反如果屏幕很大的時候，我們需要將界面變為原來的1.2倍，那么容器將相應的從原始尺寸縮小到 screenSize/1.2

后記

我希望你能喜歡這個游戲和我寫的這篇文章，我也希望通過這篇文章，你可以收獲一些新的東西并作出十分精彩的作品

我將持續不斷地完善我的游戲，并相應地更新文章，增加新的玩法或者嘗試些新的技術哦！

本文由眾成翻譯（zcfy.cc）的譯者翻譯完成，搶先閱讀更多優質英文技術文章，歡迎訪問眾成翻譯。

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

通常我們說的 Web 動畫，其實包含了以下三大類：

1、CSS3 動畫

2、javascript 動畫（canvas）

3、html 動畫（SVG）

3 種動畫各有優劣，實際應用中根據情況作出取舍，本文討論的是我認為 SVG 中在實際項目中非常有應用價值 SVG 線條動畫。

SVG 的歷史和優勢（W3C）

在 2003 年一月，SVG 1.1 被確立為 W3C 標準。參與定義 SVG 的組織有：太陽微系統、Adobe、蘋果公司、IBM 以及柯達。與其他圖像格式相比，使用 SVG 的優勢在于：

1、SVG 可被非常多的工具讀取和修改（比如記事本）

2、SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。

3、SVG 是可伸縮的

4、SVG 圖像可在任何的分辨率下被高質量地打印

5、SVG 可在圖像質量不下降的情況下被放大

6、SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）

7、SVG 可以與 Java 技術一起運行

8、SVG 是開放的標準

9、SVG 文件是純粹的 XML

10、SVG 的主要競爭者是 Flash。

與 Flash 相比，SVG 最大的優勢是與其他標準（比如 XSL 和 DOM）相兼容。而 Flash 則是未開源的私有技術。

SVG 是什么

可縮放矢量圖形，即SVG，是W3C XML的分枝語言之一，用于標記可縮放的矢量圖形。（摘自MDN）

上面代碼中，先談談 svg 標簽：

version：表示 <svg> 的版本，目前只有 1.0，1.1 兩種
xmlns：http://www.w3.org/2000/svg 固定值
xmlns:xlink：http://www.w3.org/1999/xlink 固定值
xml:space：preserve 固定值，上述三個值固定，表示命名空間，當數據單獨存在svg文件內時，這3個值不能省略
class：就是我們熟悉的 class 類選擇器
width | height：定義 svg 畫布的大小
viewbox：定義了畫布上可以顯示的區域，當 viewBox 的大小和 svg 不同時，viewBox 在屏幕上的顯示會縮放至 svg 同等大小

有了 svg 標簽，我們就可以愉快的在內部添加 SVG 圖形了

SVG 基本形狀

SVG 線條動畫基礎入門知識

MDN Web 有基本形狀的文檔，建議去看看。包含矩形、圓形、橢圓、線條、多邊形、折線等等。

好了，有了基本的了解，我們繼續今天的話題，SVG 線條動畫。

SVG 線條動畫

先看看效果圖，然后想想如果是你，該怎么實現這個效果了？

SVG 線條動畫基礎入門知識

ok，像以前一樣，我們先來解析一下（按步驟實現）：

1、svg畫個按鈕（基礎形狀-矩形）

2、矩形只保留下方底邊

3、實現鼠標：hover事件 + 動畫效果

svg畫個按鈕

<div class="button"> 
 <svg 
 viewBox="0 0 320 60" 
 version="1.1" 
 xmlns="http://www.w3.org/2000/svg" 
 > 
 <rect class="shape" height="60" width="320"></rect> 
 </svg> 
 <div class="hover-text">Web 秀</div> 
</div>

添加樣式

.button { 
 position: absolute; 
 width: 320px; 
 height: 60px; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%, -50%); 
} 
.hover-text { 
 position: absolute; 
 line-height: 60px; 
 width: 320px; 
 top: 0; 
 color: #1199ff; 
 font-size: 28px; 
 text-align: center; 
 cursor: pointer; 
} 
.shape { 
 fill: transparent; 
 stroke-width: 4px; 
 stroke: #1199ff; 
}

SVG 線條動畫基礎入門知識

button垂直水平居中、shape透明填充，邊框寬度4px，邊框顏色#1199ff。

也許你會對fill、stroke-width等屬性有點懵，下面看看他們的描述：

fill：類比 css 中的 background-color，給 svg 圖形填充顏色；
stroke-width：類比 css 中的 border-width，給 svg 圖形設定邊框寬度；
stroke：類比 css 中的 border-color，給 svg 圖形設定邊框顏色；
stroke-linejoin | stroke-linecap：設定線段連接處的樣式；
stroke-dasharray：值是一組數組，沒數量上限，每個數字交替表示劃線與間隔的寬度；
stroke-dashoffset：則是劃線與間隔的偏移量

重點講講能夠實現線條動畫的關鍵屬性 stroke-dasharray 。屬性 stroke-dasharray 可控制用來描邊的點劃線的圖案范式。

SVG 矩形只留底邊

這里我們給按鈕添加stroke-dasharray：

.shape { 
 ... 
 stroke-dasharray: 160 520; 
 stroke-dashoffset: -460; 
}

SVG 線條動畫基礎入門知識

SVG hover動畫

.button:hover .hover-text { 
 transition: 0.5s; 
 color: pink; 
} 
 
.button:hover .shape { 
 -webkit-animation: draw 0.5s linear forwards; 
 animation: draw 0.5s linear forwards; 
} 
 
@keyframes draw { 
 0% { 
 stroke-dasharray: 160 520; 
 stroke-dashoffset: -460; 
 stroke-width: 4px; 
 } 
 100% { 
 stroke-dasharray: 760; 
 stroke-dashoffset: 0; 
 stroke-width: 2px; 
 stroke: pink; 
 } 
}

hover時，改變文字顏色，利用stroke-dasharray和stroke-dashoffset實現動畫效果。

后續文章將會詳述非規則圖形，如何使用 PS + AI 生成 path 路徑，實現 SVG 動畫，敬請期待。

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址和源文件下載請點擊下方“了解更多”

在線咨詢

上一篇：精選13個HTML5學習必備網站
下一篇：破解百度網盤限速，可達6MB/s

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

手把手教你輕松實現SVG動畫

前言

SVG 的歷史和優勢（W3C）

SVG 是什么

SVG 基本形狀

SVG 線條動畫

公告

您的項目需求