来源: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>
|
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
>
|