1
2
3
4
5
6
7
CSS3实现的文字特效
8
9 body{
10 background:#000;
11 }
12 h1{
13 text-align:center;
14 color:#fff;
15 font-size:48px;
16 font-family:'Fruktur', cursive;
17 text-shadow:1px 1px 1px #ccc,18 0 0 10px #fff,19 0 0 20px #fff,20 0 0 30px #fff,21 0 0 40px #ff00de,22 0 0 70px #ff00de,23 0 0 80px #ff00de,24 0 0 100px #ff00de,25 0 0 150px #ff00de;
26
27 transform-style:preserve-3d;
28 -moz-transform-style:preserve-3d;
29 -webkit-transform-style:preserve-3d;
30 -ms-transform-style:preserve-3d;
31 -o-transform-style:preserve-3d;
32
33
34 animation:run ease-in-out 9s infinite;
35 -moz-animation:run ease-in-out 9s infinite;
36 -webkit-animation:run ease-in-out 9s infinite;
37 -ms-animation:run ease-in-out 9s infinite;
38
39 -o-animation:run ease-in-out 9s infinite;
40 }
41
42 @keyframes run{
43 0% {44 transform:rotateX(-5deg) rotateY(0);
45 }
46 50%{
47 transform:rotateX(0) rotateY(180deg);
48 text-shadow:1px 1px 1px #ccc,49 0 0 10px #fff,50 0 0 20px #fff,51 0 0 30px #fff,52 0 0 40px #3EFF3E,53 0 0 70px #3EFFff,54 0 0 80px #3EFFff,55 0 0 100px #3EFFee,56 0 0 150px #3EFFee;
57
58 }
59 100%{
60 transform:rotateX(5deg) rotateY(360deg);
61 }
62 }63
64 @-moz-keyframes run{
65 0% {66 -moz-transform:rotateX(-5deg) rotateY(0);
67
68 }
69 50%{
70 -moz-transform:rotateX(0) rotateY(180deg);
71 text-shadow:1px 1px 1px #ccc,72 0 0 10px #fff,73 0 0 20px #fff,74 0 0 30px #fff,75 0 0 40px #3EFF3E,76 0 0 70px #3EFFff,77 0 0 80px #3EFFff,78 0 0 100px #3EFFee,79 0 0 150px #3EFFee;
80 }
81 100%{
82 -moz-transform:rotateX(5deg) rotateY(360deg);
83 }
84 }85
86 @-webkit-keyframes run{
87 0% {88 -webkit-transform:rotateX(-5deg) rotateY(0);
89
90 }
91 50%{
92 -webkit-transform:rotateX(0) rotateY(180deg);
93 text-shadow:1px 1px 1px #ccc,94 0 0 10px #fff,95 0 0 20px #fff,96 0 0 30px #fff,97 0 0 40px #3EFF3E,98 0 0 70px #3EFFff,99 0 0 80px #3EFFff,100 0 0 100px #3EFFee,101 0 0 150px #3EFFee;
102
103 }
104 100%{
105 -webkit-transform:rotateX(5deg) rotateY(360deg);
106 }
107 }108 @-ms-keyframes run{
109 0% {110 -ms-transform:rotateX(-5deg) rotateY(0);
111
112 }
113 50%{
114 -ms-transform:rotateX(0) rotateY(180deg);
115
116 }
117 100%{
118 -ms-transform:rotateX(5deg) rotateY(360deg);
119 }
120 }121
122
123
124
学习源于兴趣和压力,不抛弃不放弃
125
126
