zoukankan html css js c++ java

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>

查看全文

相关阅读:
配置ADCS后访问certsrv的问题
 CSS基本知识
 HTML的基本架构
 网站设计需要的基本知识
 系统安装Serv-U后IIS出错提示：HRESULT：0x80070020
服务器环境配置全过程
 服务器、客户端双认证(2)
PHP 计数排序算法
 sql语句随机取一张的数据 rand()
PHP导入CSV文件数据

原文地址：https://www.cnblogs.com/webaction/p/12516777.html