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

发布时间:2020-11-19 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了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     name="viewport" content="width=device-width,initial-scale=1.0" 6     http-equiv="X-UA-Compatible"="ie=edge" 7     title>css3浏览器前缀</ 8     style type="text/css" 9         table{
10         border: 1px solid #ccc;
11         border-spacing50px;/*表格边框之间的距离*/
12         border-collapse collapse表格边框是否合并13         }
14         tr,td,th15             border 1px solid #CCCCCC16             text-align center17             padding 5px18         19     style20 21 body22     table23         tr24             th>前缀25             >浏览器26         27         28             td>-webkit29             >chrome和safari30         31         32             >-moz33             >firefox34         35         36             >-ms37             >IE38         39         40             >-o41             >opera42         43     44 45 html>

CSS3实现的文字特效代码,修改参数观察变化

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

总结


以上是前端之家为你收集整理的css3文字特效和浏览器兼容性全部内容,希望文章能够帮你解决css3文字特效和浏览器兼容性所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。