相信大家在Flash时代见过很多通过Flash动画模拟毛笔书写效果的教程，但在Flash早已停止被支持的今天，“畅想资源”便来教教大家如何通过SVG和CSS动画简单实现动画书写毛笔字效果，让访客在移动设备和不支持Flash的浏览器(即现今绝大多数浏览器

)中也一样能看到毛笔字书写效果，为你的网站加入中国传统文化色彩。

预览

“畅想资源”个人网站首页：https://www.hesyifei.com/(或点击下方“Run”按钮预览)

一、准备毛笔字SVG源文件

1、既然要利用纯SVG+CSS动画实现动画书写毛笔字效果，我们当然首先需要一个以SVG路径(path)形式保存的毛笔字文件。

我们在这里将使用“书法迷”网站上所提供的SVG文件，大家亦可自行于纸上写完毛笔字后扫描，再将每笔的边缘转换为闭合路径并存为SVG文件。

提示：本文中为方便期间将只使用一个字(“非”)来进行教程，实际操作中可以同样方法使用更多字来制成整个动画(参见上方预览动画的原始码)。

本文所用的原始SVG文件：(下载自书法迷；书法家：黎简)

二、切分每一笔画

1、接下来我们需要将毛笔中每一笔画单独切分开来。

我们本文中将使用Adobe Illustrator CC做示范，但你也可以使用你熟悉的其它SVG工具达成相同效果。

2、首先我们可以把所有背景删除，再把所有图层都移动到根部，这样可以避免SVG中保有任何 g transform 等标签，使得所有路径都清楚地保存在SVG文件中，让之后的步骤更加顺利。

(注意现在右下角只有两个图层了)

3、接着我们便可以正式开始切割笔画了，“畅想资源”找到AI中一个比较方便的“美工刀”(Knife)，但大家也可能有更快更方便的方法。这里“畅想资源”就不详细介绍如何使用“美工刀”，可自行寻找AI相关教程。

4、对于没有重叠的笔画来说(即字中其它笔画不会碰到这一笔画，比如下图中“非”字的右半部份的笔画)，切割十分简单，只需要将两个部分分开来即可。

5、对于有重叠部分的笔画来说(即字中其它笔画会重复覆盖这一笔画，比如下图中的“非”字的左下角那一个笔画)，切割时就需要先复制(duplicate)那一图层，然后再想办法把两个重叠的笔画分开切割，从而让各自都能保留一个完整的笔画。

6、切割完成后，将每个图层命名为可以理解的名字，比如“非”的第一笔可以被叫做“fei-1”。

(注意现在右下角的图层；图层倒序排后在SVG源文件中笔画便能正序排，方便我们进行下一步)

7、用纯文字编辑器打开SVG文件，检查是否整个文件是否只剩下 path 标签，没有 g 等其它标签(style 标签可以保留)，如有问题请参见上方第2步。

viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">

.st0{fill:#CC3300;}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

viewBox="0 0 128 128"style="enable-background:new 0 0 128 128;"xml:space="preserve">

.st0{fill:#CC3300;}

c-0.3-1.2-0.8-2.3-1-3.5c0.3-1,0.8-1.9,1.1-2.8c-0.4-0.1-0.8-0.2-1.2-0.3c0.9-4.9,0.1-10,0.4-15c0.2-1.2,1-2.3,1.1-3.6

c-0.1-0.7-0.6-1.3-0.9-1.9c-1.1-1.8-1.5-3.8-2.7-5.5c-1.3-1.7-2.5-3.5-3.7-5.2c-0.8-1.2-2.3-1.6-3.6-2.1c-0.2,1.1-0.6,2.2-0.7,3.3

c0.1,1.5,0.4,3.1,0.1,4.7c-0.4,2.5-0.5,5.1-0.3,7.7c-0.4,0.4-0.8,0.9-1.2,1.3c-0.1,0-0.1,0-0.2-0.1l0.4,11c0.1,0,0.1,0,0.2,0

c-0.6,3.3-0.5,6.7-0.5,10c-0.1,0-0.1,0-0.2,0L38.7,71c0,0,0,0,0.1,0c0.4,1,1.4,1.8,1.1,2.9c-1,1.5-2.4,2.9-2.6,4.8

c-0.3,1.4,0.8,2.4,1,3.7c0,0-0.1,0.1-0.1,0.1l6.8,10.8c0,0,0,0,0,0c1,0.3,2,0.6,3,0.7c0.7,0.4,1.4-0.1,1.8-0.6

c0.9-1.4,2-2.6,3.1-3.9c-0.1-1.8,0.1-3.6,0.6-5.4l-5.5-7.7C48,76.4,47.9,76.4,47.9,76.4z"/>

c1.9-0.4,3.8,0,5.7,0.3l-0.4-11c-1.2-0.5-2.4-1-3.7-1.1c-3.3-0.4-6.6-1.1-10-1c-0.7,1.3-1.5,2.5-2.6,3.5c-1.5,1-3.2,1.6-4.9,2.2

c0,1.6,1.3,2.9,2.8,3.1c1.3,0.4,3.1,0.6,3.6,2.1c-0.7,2.6-3.2,4.6-3.4,7.5c-0.4,1.1,0.1,2.1,0.7,3c0,0,0,0,0,0l0.9,0.5

C22.8,60.8,24.7,60,25.9,59z"/>

c-1.4,1.5-3,2.8-4.6,4.1c-1.2,0.7-2.4,1.3-3.6,2c-1.4,0.9-3.1,0.9-4.6,1.7c-0.8,0.9-1.8,1.6-3,1.7c-0.4-1.3-0.9-2.8-0.2-4.2

c0.7-1.3,1.4-2.6,2.4-3.7c0.8-1,2.1-1.5,2.8-2.5c1.5-1.7,2.6-3.7,4-5.5c2-2.2,4.6-3.8,7.2-5.2l0.7-7.2c-1.6,0-2.9-1.1-4.5-1.2

c-1.8-0.2-3.4-1.2-5.1-1.7c-1.4,0.2-2.7,1-4,1.6c-0.9,0.4-2,0.2-2.9,0.2c0,0,0-0.1,0-0.1L21.9,62c-0.9,0.1-2,0.2-2.3,1.2

c-0.6,1.4,0.3,2.7,1,3.8c0.7,1.8,2.5,2.9,3.9,4.1c-0.2,1.1-0.1,2.1-0.2,3.2c-0.1,1.3-0.8,2.5-1.5,3.6c-1,1.4-1.1,3.1-1.9,4.6

c-1.3,2.9-3.5,5.2-5.3,7.7c-0.8,2.3-0.8,4.9,0,7.2c0.5,0.8,1.2,1.5,2,2c1.9,1,3,2.9,4.3,4.5c0.3-0.1,0.6-0.2,0.9-0.3

c0.9,1,2.2,1.1,3.4,1.5c0.9,0.5,1.7,1.6,2.9,1.2c1.9-0.1,3.9-0.2,5.5-1.4c2.2-1.2,3.9-3.2,5.7-5c2-1.8,1.9-5.2,4.5-6.5l8.6-9

c0-0.1,0.1-0.2,0.1-0.3c0.8-1.2,2-2,2.9-3.2c0.8-1.1,1.5-2.3,2.5-3.3c0.9-0.3,2-0.1,2.9-0.4c-0.2-0.5-0.4-1-0.5-1.5

c0.5-0.3,1-0.6,1.4-1.1c1.5-2,2.6-4.2,3.5-6.5c0.4-0.9,1.2-1.7,1.6-2.7C66.8,65.4,65.9,65.4,65.1,65.8z"/>

c-0.5-1.6-0.6-3.4-0.1-5c0.4-1.2,0.2-2.5,0-3.8c0,0,0,0,0.1,0l0.3-1.8c0,0,0,0-0.1,0.1c0-0.9,0.1-1.8,0.3-2.7c0,0,0,0,0,0l-0.5-8

c0,0-0.1,0-0.1,0c0-3.6-0.1-7.3,0.5-10.9c0.5-2.1,2.4-4.2,1.1-6.4c-0.5-1.1-1-2.1-1.8-3c-1-0.8-2.3-0.9-3.4-1.2

c-2.2-0.6-4.5-1-6.7-0.3c-1.4,1.1-2.6,2.4-3.8,3.7c-1.3,1.3-1.8,3-2.3,4.7c1.5,0.6,3,0.8,4.6,0.5c1-0.2,1.4,1,1.7,1.7

c0,2.8,0,5.6,0,8.4c-0.2,2.5-0.1,5,0.4,7.4c0,1.9-0.4,3.9,0.1,5.8c0.2,0.8,0.2,1.7,0,2.6c-0.4,2.9-0.4,5.9-0.9,8.8

c-0.4,4.5,0.4,8.9,0.6,13.4c-0.2,1.9,0.5,3.7,0.5,5.5c0.7,2.1-0.9,4-0.5,6c0.4,1.9,1.2,3.8,1.2,5.8c-0.9,0.7-2.1,1.2-2.8,2.1

c-0.4,1.8-0.7,3.8-2.1,5.2c0.9,0.9,1.7,2,2.3,3.2c1.3,3,2.7,6,5,8.3c0.7,0.8,1.9,0.4,2.8,0.4c1.7,0.3,2.8-1.1,3.5-2.4

c0.9-2.6,0.5-5.3,0.1-7.9c-0.3-1.5,0.1-3.1-0.3-4.6c-0.4-2.9-0.5-6,0.6-8.8c0,0,0,0,0,0l-0.5-7.5C83.2,78.5,83.9,76.9,83.9,75.5z"/>

c1.9-0.1,3.8-0.2,5.7-0.6c1.2-0.8,2.6-1.7,3.2-3.1c-0.2-1.7-1.6-2.9-2.5-4.2c-1.9-1.3-4.3-1.4-6.5-1.6c-1.3-0.1-2.6-0.5-4-0.4

c-2.1,0.2-4,1.2-6,1.8l0.5,8C85.2,47.1,85.5,47.2,85.8,47.3z"/>

c0.9-0.8,2.2,0.7,3.1-0.3c1.1-1.1,2.6-2,3.3-3.4c0.1-2.9-2.7-5.4-5.5-5.6c-1.7-0.3-3.1-1.2-4.7-1.9c-1-0.4-2-0.1-3,0.1

c-1.9,0.5-3.9,0.9-5.9,1.2c0,0,0-0.1,0-0.1l-0.3,5.3C85.7,65.6,88.2,66.2,88.3,68.2z"/>

c-2.7,1.1-5.7,1.2-8.6,0.9c-1.1-0.2-2.5,0.1-3.3-0.9c0,0,0,0,0-0.1l0.5,7.5c0.8,0.6,1.5,1.2,2.3,1.8c-0.5,0.3-1,0.7-1.5,1

c0.7,2.3,2.4,4.1,4.4,5.3c1.1,0.3,2.3,0,3.4,0c2.6-0.1,5.1-1.1,7.8-1c0.9-0.1,1.6,0.4,2.4,0.7c1.2-0.2,2.2-1,3.4-1.1

c2.1,0.1,3.8-1.4,5.8-1.8C111.8,90.1,111.3,87.9,110.8,85.7z"/>

三、加入笔序路径

1. 在切割完成后，我们还需要让电脑知道他该按照什么路径、什么顺序来播放每一笔笔画。

2. 首先，选取“铅笔工具”(Pencil Tool)，记得在顶部把这个path的颜色调为“无”(即透明)。

3. 然后依照毛笔手写时的笔序和方向，分别画出每个笔画的路径，这一路径应在那笔笔画的正中间。

注意：这一路径最好在起点可超出最初有墨的地方，否则最后显示时那一笔的第一点将突然出现而不是渐渐加入。

提示：如果这一笔画属于刚刚“二-5”步中有重叠部分的笔画，也记得将笔画当作单独的两笔来处理。

4. 将新加入的每个图层(即每个路径)命名为可以理解的名字，比如“非”的第一笔笔序可以被叫做“line-fei-1”。

(注意现在右下角的图层)

viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">

.st0{fill:#CC3300;}

.st1{fill:none;}

// ......(和第二部分结尾代码相同)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

viewBox="0 0 128 128"style="enable-background:new 0 0 128 128;"xml:space="preserve">

.st0{fill:#CC3300;}

.st1{fill:none;}

// ......(和第二部分结尾代码相同)

c-1.1,2.3-2.1,4.7-2.2,7.3c0,2.6,1.1,5.3,3.5,6.4c1.7,0.8,3.8,0.6,5.6-0.2c1.8-0.8,3.3-2,4.8-3.2c2.7-2.2,5.4-4.4,8-6.6

c0.7-0.6,1.5-1.2,2.2-1.8c0.9-0.7,1.8-1.5,2.7-2.2c7.6-6.3,14.8-13,21.7-20"/>

c-0.6,17.3-0.7,34.7-0.4,52c0.1,2.5,0.1,5-0.2,7.5c-0.6,4.9-2.5,9.4-4.3,14"/>

c-2.2,2-4.4,4-6.5,6"/>

四、制作并调试动画

1、首先，我们可创建一个HTML和一个CSS文件。注意SVG源代码一定要保存在HTML页内(即inline使用)，而非作为单独文件储存并使用img加入。

2、我们要将每一个笔序(即上方第三部分做出的以“line-”开头的一堆开放路径)放入一个SVG代码的根中，并给每个路径加入 class="pen line-fei-1" (这里“line-fei-1”是你那一笔序的名称)(代码是下方代码的2至12行)

2、再将每一笔画(即上方第二部分做出的一堆封闭的路径)加入SVG defs 内的每个 clipPath 中。clipPath 的ID便是你笔画的名称(比如“fei-1”)(代码是下方代码的14至67行)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

c-1.1,2.3-2.1,4.7-2.2,7.3c0,2.6,1.1,5.3,3.5,6.4c1.7,0.8,3.8,0.6,5.6-0.2c1.8-0.8,3.3-2,4.8-3.2c2.7-2.2,5.4-4.4,8-6.6

c0.7-0.6,1.5-1.2,2.2-1.8c0.9-0.7,1.8-1.5,2.7-2.2c7.6-6.3,14.8-13,21.7-20"/>

c-0.6,17.3-0.7,34.7-0.4,52c0.1,2.5,0.1,5-0.2,7.5c-0.6,4.9-2.5,9.4-4.3,14"/>

c-2.2,2-4.4,4-6.5,6"/>

c-0.3-1.2-0.8-2.3-1-3.5c0.3-1,0.8-1.9,1.1-2.8c-0.4-0.1-0.8-0.2-1.2-0.3c0.9-4.9,0.1-10,0.4-15c0.2-1.2,1-2.3,1.1-3.6

c-0.1-0.7-0.6-1.3-0.9-1.9c-1.1-1.8-1.5-3.8-2.7-5.5c-1.3-1.7-2.5-3.5-3.7-5.2c-0.8-1.2-2.3-1.6-3.6-2.1c-0.2,1.1-0.6,2.2-0.7,3.3

c0.1,1.5,0.4,3.1,0.1,4.7c-0.4,2.5-0.5,5.1-0.3,7.7c-0.4,0.4-0.8,0.9-1.2,1.3c-0.1,0-0.1,0-0.2-0.1l0.4,11c0.1,0,0.1,0,0.2,0

c-0.6,3.3-0.5,6.7-0.5,10c-0.1,0-0.1,0-0.2,0L38.7,71c0,0,0,0,0.1,0c0.4,1,1.4,1.8,1.1,2.9c-1,1.5-2.4,2.9-2.6,4.8

c-0.3,1.4,0.8,2.4,1,3.7c0,0-0.1,0.1-0.1,0.1l6.8,10.8c0,0,0,0,0,0c1,0.3,2,0.6,3,0.7c0.7,0.4,1.4-0.1,1.8-0.6

c0.9-1.4,2-2.6,3.1-3.9c-0.1-1.8,0.1-3.6,0.6-5.4l-5.5-7.7C48,76.4,47.9,76.4,47.9,76.4z"/>

c1.9-0.4,3.8,0,5.7,0.3l-0.4-11c-1.2-0.5-2.4-1-3.7-1.1c-3.3-0.4-6.6-1.1-10-1c-0.7,1.3-1.5,2.5-2.6,3.5c-1.5,1-3.2,1.6-4.9,2.2

c0,1.6,1.3,2.9,2.8,3.1c1.3,0.4,3.1,0.6,3.6,2.1c-0.7,2.6-3.2,4.6-3.4,7.5c-0.4,1.1,0.1,2.1,0.7,3c0,0,0,0,0,0l0.9,0.5

C22.8,60.8,24.7,60,25.9,59z"/>

c-1.4,1.5-3,2.8-4.6,4.1c-1.2,0.7-2.4,1.3-3.6,2c-1.4,0.9-3.1,0.9-4.6,1.7c-0.8,0.9-1.8,1.6-3,1.7c-0.4-1.3-0.9-2.8-0.2-4.2

c0.7-1.3,1.4-2.6,2.4-3.7c0.8-1,2.1-1.5,2.8-2.5c1.5-1.7,2.6-3.7,4-5.5c2-2.2,4.6-3.8,7.2-5.2l0.7-7.2c-1.6,0-2.9-1.1-4.5-1.2

c-1.8-0.2-3.4-1.2-5.1-1.7c-1.4,0.2-2.7,1-4,1.6c-0.9,0.4-2,0.2-2.9,0.2c0,0,0-0.1,0-0.1L21.9,62c-0.9,0.1-2,0.2-2.3,1.2

c-0.6,1.4,0.3,2.7,1,3.8c0.7,1.8,2.5,2.9,3.9,4.1c-0.2,1.1-0.1,2.1-0.2,3.2c-0.1,1.3-0.8,2.5-1.5,3.6c-1,1.4-1.1,3.1-1.9,4.6

c-1.3,2.9-3.5,5.2-5.3,7.7c-0.8,2.3-0.8,4.9,0,7.2c0.5,0.8,1.2,1.5,2,2c1.9,1,3,2.9,4.3,4.5c0.3-0.1,0.6-0.2,0.9-0.3

c0.9,1,2.2,1.1,3.4,1.5c0.9,0.5,1.7,1.6,2.9,1.2c1.9-0.1,3.9-0.2,5.5-1.4c2.2-1.2,3.9-3.2,5.7-5c2-1.8,1.9-5.2,4.5-6.5l8.6-9

c0-0.1,0.1-0.2,0.1-0.3c0.8-1.2,2-2,2.9-3.2c0.8-1.1,1.5-2.3,2.5-3.3c0.9-0.3,2-0.1,2.9-0.4c-0.2-0.5-0.4-1-0.5-1.5

c0.5-0.3,1-0.6,1.4-1.1c1.5-2,2.6-4.2,3.5-6.5c0.4-0.9,1.2-1.7,1.6-2.7C66.8,65.4,65.9,65.4,65.1,65.8z"/>

c-0.5-1.6-0.6-3.4-0.1-5c0.4-1.2,0.2-2.5,0-3.8c0,0,0,0,0.1,0l0.3-1.8c0,0,0,0-0.1,0.1c0-0.9,0.1-1.8,0.3-2.7c0,0,0,0,0,0l-0.5-8

c0,0-0.1,0-0.1,0c0-3.6-0.1-7.3,0.5-10.9c0.5-2.1,2.4-4.2,1.1-6.4c-0.5-1.1-1-2.1-1.8-3c-1-0.8-2.3-0.9-3.4-1.2

c-2.2-0.6-4.5-1-6.7-0.3c-1.4,1.1-2.6,2.4-3.8,3.7c-1.3,1.3-1.8,3-2.3,4.7c1.5,0.6,3,0.8,4.6,0.5c1-0.2,1.4,1,1.7,1.7

c0,2.8,0,5.6,0,8.4c-0.2,2.5-0.1,5,0.4,7.4c0,1.9-0.4,3.9,0.1,5.8c0.2,0.8,0.2,1.7,0,2.6c-0.4,2.9-0.4,5.9-0.9,8.8

c-0.4,4.5,0.4,8.9,0.6,13.4c-0.2,1.9,0.5,3.7,0.5,5.5c0.7,2.1-0.9,4-0.5,6c0.4,1.9,1.2,3.8,1.2,5.8c-0.9,0.7-2.1,1.2-2.8,2.1

c-0.4,1.8-0.7,3.8-2.1,5.2c0.9,0.9,1.7,2,2.3,3.2c1.3,3,2.7,6,5,8.3c0.7,0.8,1.9,0.4,2.8,0.4c1.7,0.3,2.8-1.1,3.5-2.4

c0.9-2.6,0.5-5.3,0.1-7.9c-0.3-1.5,0.1-3.1-0.3-4.6c-0.4-2.9-0.5-6,0.6-8.8c0,0,0,0,0,0l-0.5-7.5C83.2,78.5,83.9,76.9,83.9,75.5z"/>

c1.9-0.1,3.8-0.2,5.7-0.6c1.2-0.8,2.6-1.7,3.2-3.1c-0.2-1.7-1.6-2.9-2.5-4.2c-1.9-1.3-4.3-1.4-6.5-1.6c-1.3-0.1-2.6-0.5-4-0.4

c-2.1,0.2-4,1.2-6,1.8l0.5,8C85.2,47.1,85.5,47.2,85.8,47.3z"/>

c0.9-0.8,2.2,0.7,3.1-0.3c1.1-1.1,2.6-2,3.3-3.4c0.1-2.9-2.7-5.4-5.5-5.6c-1.7-0.3-3.1-1.2-4.7-1.9c-1-0.4-2-0.1-3,0.1

c-1.9,0.5-3.9,0.9-5.9,1.2c0,0,0-0.1,0-0.1l-0.3,5.3C85.7,65.6,88.2,66.2,88.3,68.2z"/>

c-2.7,1.1-5.7,1.2-8.6,0.9c-1.1-0.2-2.5,0.1-3.3-0.9c0,0,0,0,0-0.1l0.5,7.5c0.8,0.6,1.5,1.2,2.3,1.8c-0.5,0.3-1,0.7-1.5,1

c0.7,2.3,2.4,4.1,4.4,5.3c1.1,0.3,2.3,0,3.4,0c2.6-0.1,5.1-1.1,7.8-1c0.9-0.1,1.6,0.4,2.4,0.7c1.2-0.2,2.2-1,3.4-1.1

c2.1,0.1,3.8-1.4,5.8-1.8C111.8,90.1,111.3,87.9,110.8,85.7z"/>

5、然后我们需要依次找出每个笔序的 stroke-dasharray 长度。暂时将每个笔画的相应长度记录下来即可。

在这里“畅想资源”为大家准备了一个工具，只需于下方(先点击右上角的“Edit on CodePen”)将你那个一个笔画的path路径粘贴进去并慢慢修改CSS中的 stroke-dasharray，直到那一笔画刚好显示完(即当 stroke-dasharray 加1时，笔画无变化；当 stroke-dasharray 减1时，笔画长度有减少)。

使用方法：

可以用类似以下的方法记录结果：

.line-fei-1：75

.line-fei-2：40

.line-fei-3：124

.line-fei-4：101

.line-fei-5：25

.line-fei-6：35

.line-fei-7：36

1

2

3

4

5

6

7

.line-fei-1：75

.line-fei-2：40

.line-fei-3：124

.line-fei-4：101

.line-fei-5：25

.line-fei-6：35

.line-fei-7：36

6、再接着我们便开始加入CSS keyframes动画了。

首先，创建一个 .pen 的class，其中 stroke 可修改为你想要的颜色，而 stroke-width 之后可能会需要进行微调(见第“五-2”步)，animation-duration 则决定了你整个动画将要进行的时间，其它animation- 开头的选项也可进行修改(详细见相关文档)。

.pen {

fill: none;

stroke: black;

stroke-width: 12;

stroke-linecap: round;

stroke-linejoin: round;

stroke-dashoffset: 0;

animation-duration: 4s;

animation-iteration-count: 1;

animation-timing-function: ease;

}

1

2

3

4

5

6

7

8

9

10

11

12

.pen{

fill:none;

stroke:black;

stroke-width:12;

stroke-linecap:round;

stroke-linejoin:round;

stroke-dashoffset:0;

animation-duration:4s;

animation-iteration-count:1;

animation-timing-function:ease;

}

7、加入每一笔序相应的class。clip-path 里是你SVG defs 中那一笔画的ID，stroke-dasharray 是你刚刚第5步为这一笔序中测试并记录下来的数字。animation-name 是之后步骤中将会加入的你这一笔序动画的名称。

.line-fei-1 {

clip-path: url(#fei-1);

stroke-dasharray: 75;

animation-name: draw-fei-1;

}

.line-fei-2 {

clip-path: url(#fei-2);

stroke-dasharray: 40;

animation-name: draw-fei-2;

}

// ...以此类推...

.line-fei-7 {

clip-path: url(#fei-7);

stroke-dasharray: 36;

animation-name: draw-fei-7;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.line-fei-1{

clip-path:url(#fei-1);

stroke-dasharray:75;

animation-name:draw-fei-1;

}

.line-fei-2{

clip-path:url(#fei-2);

stroke-dasharray:40;

animation-name:draw-fei-2;

}

// ...以此类推...

.line-fei-7{

clip-path:url(#fei-7);

stroke-dasharray:36;

animation-name:draw-fei-7;

}

8. 将所有笔序都加入完成后，便可开始加入CSS keyframes。0%时那个 stroke-dashoffset 和你上方该笔序的 stroke-dasharray 是同一个值，每个动画中上方的百分比代表开始时时间(即你第6步中设置的 animation-duration)的百分比，下方的百分比代表结束时时间的百分比。

@keyframes draw-fei-1 {

0% {

stroke-dashoffset: 75;

}

10% {

stroke-dashoffset: 0;

}

}

@keyframes draw-fei-2 {

0%, 10% {

stroke-dashoffset: 40;

}

20% {

stroke-dashoffset: 0;

}

}

// ...以此类推...

@keyframes draw-fei-7 {

0%, 90% {

stroke-dashoffset: 36;

}

100% {

stroke-dashoffset: 0;

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

@keyframesdraw-fei-1{

0%{

stroke-dashoffset:75;

}

10%{

stroke-dashoffset:0;

}

}

@keyframesdraw-fei-2{

0%,10%{

stroke-dashoffset:40;

}

20%{

stroke-dashoffset:0;

}

}

// ...以此类推...

@keyframesdraw-fei-7{

0%,90%{

stroke-dashoffset:36;

}

100%{

stroke-dashoffset:0;

}

}

9、现在尝试访问你的网页，应该整体动画流程都已成形，接下来便可开始微调和优化部分。

五、微调与优化

1、首先，尝试不同的keyframes时间百分比以找到你觉得最好的每个笔画的书写时间。

2、其次，打开浏览器的开发者工具，尝试定位并修改 .pen class中 stroke-width 值，看看会不会因为这个值调大了而显示了更完整的笔画。如果是可尝试于CSS中进行修改并查看效果。

3、可尝试于每个笔序class中(比如 .line-fei-1)加入一个 !important 的 animation-timing-function 来修改动画的细节速度，比如可调整为 ease-in、ease-out、linear等等。详细请参见：CSS animation-timing-function Property

4、加入各个浏览器的prefix，比如一个笔画的动画可能需要加入以下浏览器prefix：

.line-fei-1 {

clip-path: url("#fei-1");

stroke-dasharray: 73;

-webkit-animation: draw-fei-1 5s ease;

-moz-animation: draw-fei-1 5s ease;

-ms-animation: draw-fei-1 5s ease;

animation: draw-fei-1 5s ease;

}

@-webkit-keyframes draw-fei-1 {

0%,

60% {

stroke-dashoffset: 73;

}

68% {

stroke-dashoffset: 0;

}

}

@-moz-keyframes draw-fei-1 {

0%,

60% {

stroke-dashoffset: 73;

}

68% {

stroke-dashoffset: 0;

}

}

@-ms-keyframes draw-fei-1 {

0%,

60% {

stroke-dashoffset: 73;

}

68% {

stroke-dashoffset: 0;

}

}

@-o-keyframes draw-fei-1 {

0%,

60% {

stroke-dashoffset: 73;

}

68% {

stroke-dashoffset: 0;

}

}

@keyframes draw-fei-1 {

0%,

60% {

stroke-dashoffset: 73;

}

68% {

stroke-dashoffset: 0;

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

.line-fei-1{

clip-path:url("#fei-1");

stroke-dasharray:73;

-webkit-animation:draw-fei-15sease;

-moz-animation:draw-fei-15sease;

-ms-animation:draw-fei-15sease;

animation:draw-fei-15sease;

}

@-webkit-keyframesdraw-fei-1{

0%,

60%{

stroke-dashoffset:73;

}

68%{

stroke-dashoffset:0;

}

}

@-moz-keyframesdraw-fei-1{

0%,

60%{

stroke-dashoffset:73;

}

68%{

stroke-dashoffset:0;

}

}

@-ms-keyframesdraw-fei-1{

0%,

60%{

stroke-dashoffset:73;

}

68%{

stroke-dashoffset:0;

}

}

@-o-keyframesdraw-fei-1{

0%,

60%{

stroke-dashoffset:73;

}

68%{

stroke-dashoffset:0;

}

}

@keyframesdraw-fei-1{

0%,

60%{

stroke-dashoffset:73;

}

68%{

stroke-dashoffset:0;

}

}

4、但很明显那样加起来会太过复杂了，所以推荐使用less等其它工具来简化代码。以下是“畅想资源”自己用less写出的一个简化版本，可供参考：

@animation-duration: 5s;

@animation-timing-function: ease;

.pen {

fill: none;

stroke: rgb(199, 182, 160);

stroke-width: 20;

stroke-linecap: round;

stroke-linejoin: round;

stroke-dashoffset: 0;

}

.do-calligraphy-animation(@name, @strokeDasharray, @startPct, @endPct, @timingFunction: @animation-timing-function) {

.p-@{name} {

clip-path: url("#@{name}");

stroke-dasharray: @strokeDasharray;

.animation(~'draw-@{name}', @animation-duration, @timingFunction);

}

.keyframes(~'draw-@{name}', {

0%, @{startPct} {

stroke-dashoffset: @strokeDasharray;

}

@{endPct} {

stroke-dashoffset: 0;

}

});

}

.do-calligraphy-animation(fei-1, 73, 0%, 20%);

.do-calligraphy-animation(fei-2, 25, 20%, 25%);

.do-calligraphy-animation(fei-3, 127, 25%, 40%, ease-in);

.do-calligraphy-animation(fei-4, 106, 40%, 75%);

.do-calligraphy-animation(fei-5, 28, 75%, 82.5%);

.do-calligraphy-animation(fei-6, 37, 82.5%, 90%);

.do-calligraphy-animation(fei-7, 38, 90%, 100%);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

@animation-duration:5s;

@animation-timing-function:ease;

.pen{

fill:none;

stroke:rgb(199,182,160);

stroke-width:20;

stroke-linecap:round;

stroke-linejoin:round;

stroke-dashoffset:0;

}

.do-calligraphy-animation(@name,@strokeDasharray,@startPct,@endPct,@timingFunction:@animation-timing-function){

.p-@{name}{

clip-path:url("#@{name}");

stroke-dasharray:@strokeDasharray;

.animation(~'draw-@{name}',@animation-duration,@timingFunction);

}

.keyframes(~'draw-@{name}',{

0%,@{startPct}{

stroke-dashoffset:@strokeDasharray;

}

@{endPct}{

stroke-dashoffset:0;

}

});

}

.do-calligraphy-animation(fei-1,73,0%,20%);

.do-calligraphy-animation(fei-2,25,20%,25%);

.do-calligraphy-animation(fei-3,127,25%,40%,ease-in);

.do-calligraphy-animation(fei-4,106,40%,75%);

.do-calligraphy-animation(fei-5,28,75%,82.5%);

.do-calligraphy-animation(fei-6,37,82.5%,90%);

.do-calligraphy-animation(fei-7,38,90%,100%);

5、欢迎提供更多意见...

参考资料

How to animate handwriting text on the web page using SVG?(特别感谢这一回答，它是网上很少几个解答了如何在动画中显示路径上的clipPath而非路径本身的问题，才让我们可以实现动画中最重要的一部分)

本文的英文版本已发表于本站的英文博客上。

历史上的今天