css3文字特效和浏览器兼容性
程序员文章站
2024-01-03 20:15:52
css3相较于css2.1增加了许多新的特性功能，目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了，需要注意的是css3样式在不同的浏览器可能需要不同的前缀（是浏览器的私有属性，兼容性），此外在代码... ......
css3是css2的升级版本，3只是版本号，它在css2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了css3大部分功能了，ie10以后也开始全面支持css3了。在编写css3样式时，不同的浏览器可能需要不同的前缀。它表示该css属性或规则尚未成为w3c标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的(代码展示css3浏览器前缀)
1 <!doctype html>
2 <html lang="zh">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="x-ua-compatible" content="ie=edge">
7 <title>css3浏览器前缀</title>
8 <style type="text/css">
9 table{
10 border: 1px solid #ccc;
11 border-spacing:50px;/*表格边框之间的距离*/
12 border-collapse: collapse;/*表格边框是否合并*/
13 }
14 tr,td,th{
15 border: 1px solid #cccccc;
16 text-align: center;
17 padding: 5px;
18 }
19 </style>
20 </head>
21 <body>
22 <table>
23 <tr>
24 <th>前缀</th>
25 <th>浏览器</th>
26 </tr>
27 <tr>
28 <td>-webkit</td>
29 <td>chrome和safari</td>
30 </tr>
31 <tr>
32 <td>-moz</td>
33 <td>firefox</td>
34 </tr>
35 <tr>
36 <td>-ms</td>
37 <td>ie</td>
38 </tr>
39 <tr>
40 <td>-o</td>
41 <td>opera</td>
42 </tr>
43 </table>
44 </body>
45 </html>
css3实现的文字特效代码，修改参数观察变化
1 <!doctype html>
2 <html lang="zh">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="x-ua-compatible" content="ie=edge">
7 <title>css3实现的文字特效</title>
8 <style type="text/css">
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 </style>
122 </head>
123 <body>
124 <h1>学习源于兴趣和压力,不抛弃不放弃</h1>
125 </body>
126 </html>