使用CSS3让文字按指定路径显示

来源：http://www.itivy.com/html5/archive/2012/4/14/css3-text-path.html

之前，我们利用CSS只能让文字横平竖直地显示，连倾斜一个角度都不行，更不用说让一串文字按指定的路径轨迹显示了。但是，CSS3到来之后，这一切实现起来是那么的简单，我们可以利用CSS3的text-transform options: rotation, skew, matrix, transform-origin等属性来实现对文字的显示路径。下面是一个示例，支持CSS3的浏览器才能看出效果

欢迎关注HTML5中文网站

CSS代码如下：

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

<style type='text/css'>

                     #warped {position:relative; display:block; width:588px;height:440px;}

 

                     #warped>span[class^=w]:nth-of-type(n+0){display:block;position:absolute;

                     -moz-transform-origin:50%100%; -webkit-transform-origin:50%100%; -o-transform-origin:50%

                     100%; -ms-transform-origin:50%100%; transform-origin:50%100%; }

 

                     #warped span{font-family:'Abel';font-size:38px;font-weight:regular;font-style:normal;

                     line-height:0.65;white-space:pre;overflow:visible;padding:0px;}

 

                     #warped .w0{-moz-transform: rotate(-7.85rad);-webkit-transform: rotate(-7.85rad);-o-transform:

                     rotate(-7.85rad);-ms-transform: rotate(-7.85rad); transform: rotate(-7.85rad);

                     width:38px; height:25px; left:21px; top:193.8px;}

 

                     #warped .w1{-moz-transform: rotate(-7.65rad);-webkit-transform: rotate(-7.65rad);-o-transform:

                     rotate(-7.65rad);-ms-transform: rotate(-7.65rad); transform: rotate(-7.65rad);

                     width:38px; height:25px; left:25.39px; top:151.85px;}

 

                     #warped .w2{-moz-transform: rotate(-7.37rad);-webkit-transform: rotate(-7.37rad);-o-transform:

                     rotate(-7.37rad);-ms-transform: rotate(-7.37rad); transform: rotate(-7.37rad);

                     width:38px; height:25px; left:40.09px; top:111.13px;}

 

                     #warped .w3{-moz-transform: rotate(-7.04rad);-webkit-transform: rotate(-7.04rad);-o-transform:

                     rotate(-7.04rad);-ms-transform: rotate(-7.04rad); transform: rotate(-7.04rad);

                     width:38px; height:25px; left:65.95px; top:77.29px;}

 

                     #warped .w4{-moz-transform: rotate(-6.75rad);-webkit-transform: rotate(-6.75rad);-o-transform:

                     rotate(-6.75rad);-ms-transform: rotate(-6.75rad); transform: rotate(-6.75rad);

                     width:21px; height:25px; left:102.45px; top:57.78px;}

 

                     #warped .w5{-moz-transform: rotate(-6.55rad);-webkit-transform: rotate(-6.55rad);-o-transform:

                     rotate(-6.55rad);-ms-transform: rotate(-6.55rad); transform: rotate(-6.55rad);

                     width:17px; height:25px; left:126.79px; top:49.23px;}

 

                     #warped .w6{-moz-transform: rotate(-6.34rad);-webkit-transform: rotate(-6.34rad);-o-transform:

                     rotate(-6.34rad);-ms-transform: rotate(-6.34rad); transform: rotate(-6.34rad);

                     width:25px; height:25px; left:148.4px; top:45.15px;}

 

                     #warped .w7{-moz-transform: rotate(-6.13rad);-webkit-transform: rotate(-6.13rad);-o-transform:

                     rotate(-6.13rad);-ms-transform: rotate(-6.13rad); transform: rotate(-6.13rad);

                     width:16px; height:25px; left:177.98px; top:46.5px;}

 

                     #warped .w8{-moz-transform: rotate(-5.94rad);-webkit-transform: rotate(-5.94rad);-o-transform:

                     rotate(-5.94rad);-ms-transform: rotate(-5.94rad); transform: rotate(-5.94rad);

                     width:20px; height:25px; left:198.23px; top:52.26px;}

 

                     #warped .w9{-moz-transform: rotate(-5.65rad);-webkit-transform: rotate(-5.65rad);-o-transform:

                     rotate(-5.65rad);-ms-transform: rotate(-5.65rad); transform: rotate(-5.65rad);

                     width:38px; height:25px; left:219.49px; top:68.52px;}

 

                     #warped .w10{-moz-transform: rotate(-5.31rad);-webkit-transform: rotate(-5.31rad);-o-transform:

                     rotate(-5.31rad);-ms-transform: rotate(-5.31rad); transform: rotate(-5.31rad);

                     width:38px; height:25px; left:249.06px; top:99.72px;}

 

                     #warped .w11{-moz-transform: rotate(-5.01rad);-webkit-transform: rotate(-5.01rad);-o-transform:

                     rotate(-5.01rad);-ms-transform: rotate(-5.01rad); transform: rotate(-5.01rad);

                     width:38px; height:25px; left:267.04px; top:138.14px;}

 

                     #warped .w12{-moz-transform: rotate(-4.78rad);-webkit-transform: rotate(-4.78rad);-o-transform:

                     rotate(-4.78rad);-ms-transform: rotate(-4.78rad); transform: rotate(-4.78rad);

                     width:38px; height:25px; left:274.56px; top:180.94px;}

 

              </style>

HTML代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<divid='warped'>

<spanclass='w0'>欢</span>

<spanclass='w1'>迎</span>

<spanclass='w2'>关</span>

<spanclass='w3'>注</span>

<spanclass='w4'>H</span>

<spanclass='w5'>T</span>

<spanclass='w6'>M</span>

<spanclass='w7'>L</span>

<spanclass='w8'>5</span>

<spanclass='w9'>中</span>

<spanclass='w10'>文</span>

<spanclass='w11'>网</span>

<spanclass='w12'>站</span>

</div>

另外有一个网站可以让你生成这些按路径显示的文字的代码：http://csswarp.eleqtriq.com/