首页 > > 网页制作 > css >

css3文字特效和浏览器兼容性

2020-03-18 09:20:10来源：博客园阅读 ()

css3文字特效和浏览器兼容性

css3相较于css2.1增加了许多新的特性功能，目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了，需要注意的是css3样式在不同的浏览器可能需要不同的前缀（是浏览器的私有属性，兼容性），此外在代码展示css3浏览器前缀中border-spacing/*表格边框之间的距离*/border-collapse: collapse;/*表格边框是否合并*/，最后通过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>