使用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的浏览器才能看出效果

欢 迎 关 注 H T M L 5 中 文 网 站

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 .w 0 {-moz-transform: rotate( -7.85 rad);-webkit-transform: rotate( -7.85 rad);-o-transform:                       rotate( -7.85 rad);-ms-transform: rotate( -7.85 rad); transform: rotate( -7.85 rad);                       width : 38px ; height : 25px ; left : 21px ; top : 193.8px ;}                         #warped .w 1 {-moz-transform: rotate( -7.65 rad);-webkit-transform: rotate( -7.65 rad);-o-transform:                       rotate( -7.65 rad);-ms-transform: rotate( -7.65 rad); transform: rotate( -7.65 rad);                       width : 38px ; height : 25px ; left : 25.39px ; top : 151.85px ;}                         #warped .w 2 {-moz-transform: rotate( -7.37 rad);-webkit-transform: rotate( -7.37 rad);-o-transform:                       rotate( -7.37 rad);-ms-transform: rotate( -7.37 rad); transform: rotate( -7.37 rad);                       width : 38px ; height : 25px ; left : 40.09px ; top : 111.13px ;}                         #warped .w 3 {-moz-transform: rotate( -7.04 rad);-webkit-transform: rotate( -7.04 rad);-o-transform:                       rotate( -7.04 rad);-ms-transform: rotate( -7.04 rad); transform: rotate( -7.04 rad);                       width : 38px ; height : 25px ; left : 65.95px ; top : 77.29px ;}                         #warped .w 4 {-moz-transform: rotate( -6.75 rad);-webkit-transform: rotate( -6.75 rad);-o-transform:                       rotate( -6.75 rad);-ms-transform: rotate( -6.75 rad); transform: rotate( -6.75 rad);                       width : 21px ; height : 25px ; left : 102.45px ; top : 57.78px ;}                         #warped .w 5 {-moz-transform: rotate( -6.55 rad);-webkit-transform: rotate( -6.55 rad);-o-transform:                       rotate( -6.55 rad);-ms-transform: rotate( -6.55 rad); transform: rotate( -6.55 rad);                       width : 17px ; height : 25px ; left : 126.79px ; top : 49.23px ;}                         #warped .w 6 {-moz-transform: rotate( -6.34 rad);-webkit-transform: rotate( -6.34 rad);-o-transform:                       rotate( -6.34 rad);-ms-transform: rotate( -6.34 rad); transform: rotate( -6.34 rad);                       width : 25px ; height : 25px ; left : 148.4px ; top : 45.15px ;}                         #warped .w 7 {-moz-transform: rotate( -6.13 rad);-webkit-transform: rotate( -6.13 rad);-o-transform:                       rotate( -6.13 rad);-ms-transform: rotate( -6.13 rad); transform: rotate( -6.13 rad);                       width : 16px ; height : 25px ; left : 177.98px ; top : 46.5px ;}                         #warped .w 8 {-moz-transform: rotate( -5.94 rad);-webkit-transform: rotate( -5.94 rad);-o-transform:                       rotate( -5.94 rad);-ms-transform: rotate( -5.94 rad); transform: rotate( -5.94 rad);                       width : 20px ; height : 25px ; left : 198.23px ; top : 52.26px ;}                         #warped .w 9 {-moz-transform: rotate( -5.65 rad);-webkit-transform: rotate( -5.65 rad);-o-transform:                       rotate( -5.65 rad);-ms-transform: rotate( -5.65 rad); transform: rotate( -5.65 rad);                       width : 38px ; height : 25px ; left : 219.49px ; top : 68.52px ;}                         #warped .w 10 {-moz-transform: rotate( -5.31 rad);-webkit-transform: rotate( -5.31 rad);-o-transform:                       rotate( -5.31 rad);-ms-transform: rotate( -5.31 rad); transform: rotate( -5.31 rad);                       width : 38px ; height : 25px ; left : 249.06px ; top : 99.72px ;}                         #warped .w 11 {-moz-transform: rotate( -5.01 rad);-webkit-transform: rotate( -5.01 rad);-o-transform:                       rotate( -5.01 rad);-ms-transform: rotate( -5.01 rad); transform: rotate( -5.01 rad);                       width : 38px ; height : 25px ; left : 267.04px ; top : 138.14px ;}                         #warped .w 12 {-moz-transform: rotate( -4.78 rad);-webkit-transform: rotate( -4.78 rad);-o-transform:                       rotate( -4.78 rad);-ms-transform: rotate( -4.78 rad); transform: rotate( -4.78 rad);                       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

< div id = 'warped' > < span class = 'w0' >欢</ span > < span class = 'w1' >迎</ span > < span class = 'w2' >关</ span > < span class = 'w3' >注</ span > < span class = 'w4' >H</ span > < span class = 'w5' >T</ span > < span class = 'w6' >M</ span > < span class = 'w7' >L</ span > < span class = 'w8' >5</ span > < span class = 'w9' >中</ span > < span class = 'w10' >文</ span > < span class = 'w11' >网</ span > < span class = 'w12' >站</ span > </ div >

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