不同的浏览器需要不同的前缀

-webkit     chrome和safari

-moz        firefox

-ms         ie

-o          opera
　　一个炫酷标题效果：
HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello YYN</title>
<link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
<link href="css/new_file.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hello CSS3</h1>
</body>
</html>
   
CSS:

body{
    background:#000;
    }
 
h1 {
    text-align:center;
    color:#fff;
 font-size:48px;
    font-family: 'Fruktur', cursive;
    text-shadow: 1px  1px 1px #ccc,
                  0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #ff00de,
                   0 0 70px #ff00de,
                   0 0 80px #ff00de,
                   0 0 100px #ff00de,
                   0 0 150px #ff00de;
      
 transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d; 
 -ms-transform-style: preserve-3d;     
 -o-transform-style: preserve-3d;

animation: run  ease-in-out 9s infinite;
    -moz-animation: run  ease-in-out 9s infinite ; 
 -webkit-animation: run  ease-in-out 9s infinite; 
 -ms-animation: run  ease-in-out 9s infinite;

-o-animation: run  ease-in-out 9s infinite; 
}

@keyframes run {
      0% {
        transform:rotateX(-5deg) rotateY(0); 
      }
    50% {
        transform:rotateX(0) rotateY(180deg); 
  text-shadow: 1px  1px 1px #ccc,
                  0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #3EFF3E,
                   0 0 70px #3EFFff,
                   0 0 80px #3EFFff,
                   0 0 100px #3EFFee,
                   0 0 150px #3EFFee;
                
      }
      100% {
        transform:rotateX(5deg) rotateY(360deg); 
      }
    }

@-moz-keyframes run {
      0% {
        -moz-transform:rotateX(-5deg) rotateY(0);

}
    50% {
        -moz-transform:rotateX(0) rotateY(180deg); 
   text-shadow: 1px  1px 1px #ccc,
                  0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #3EFF3E,
                   0 0 70px #3EFFff,
                   0 0 80px #3EFFff,
                   0 0 100px #3EFFee,
                   0 0 150px #3EFFee;
                
      }
      100% {
        -moz-transform:rotateX(5deg) rotateY(360deg); 
      }
    }

@-webkit-keyframes run {
      0% {
        -webkit-transform:rotateX(-5deg) rotateY(0);

}
    50% {
        -webkit-transform:rotateX(0) rotateY(180deg); 
   text-shadow: 1px  1px 1px #ccc,
                  0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #3EFF3E,
                   0 0 70px #3EFFff,
                   0 0 80px #3EFFff,
                   0 0 100px #3EFFee,
                   0 0 150px #3EFFee;
                
      }
      100% {
        -webkit-transform:rotateX(5deg) rotateY(360deg); 
      }
    }
@-ms-keyframes run {
      0% {
        -ms-transform:rotateX(-5deg) rotateY(0);

}
    50% {
        -ms-transform:rotateX(0) rotateY(180deg); 
  
      }
      100% {
        -ms-transform:rotateX(5deg) rotateY(360deg); 
      }
    }

CSS3浏览器兼容的更多相关文章

  1. Modernizr.js入门指南(HTML5&CSS3浏览器兼容插件)

    HTML5 和 CSS3 的快速发展,给我们带来了极大的便利,比如从此再也不用花费大量的时间只是为了设计一个圆角的效果. 但是!我们不能像控制机器一样来控制所有的人都一夜之间升级到现代浏览器,因为那些 ...

  2. css3浏览器兼容的前缀

    -moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表safari.chrome私有属性

  3. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. 老式浏览器兼容HTML5和CSS3的问题

      1.让老式浏览器支持HTML5   HTML5能为我们做的事儿很多,最为可口的就是语义化标签的应用,如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x,那这篇文章对你一定有用,因 ...

  5. JS控制CSS3，添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...

  6. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  7. webpack3中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容

    1.在webpack中需要处理css必须先安装如下两个loader npm install --save-dev css-loader style-loader 2.要处理sass和添加浏览器前缀需要 ...

  8. 浅谈CSS hack（浏览器兼容）

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  9. CSS背景图拉伸自适应尺寸，全浏览器兼容

    突然有人问我这个问题,说网上CSS filter的方法在非IE浏览器下不奏效.思考之后,问题之外让我感慨万千啊,很多我们所谓的难题,都会随着时代的发展迎刃而解,或被新的问题所取代. 当CSS背景图片拉 ...

随机推荐

  1. 《物联网框架ServerSuperIO教程》-20.网络通讯控制器分组，提高交互的负载平衡能力。v3.6.6 版本发布

    20.1     概述 ServerSuperIO原来在网络通讯模式下,只有一个网络控制器,在自控模式.并发模式和单例模式下时都是异步处理返回的数据,并不会出现性能问题.但是在轮询模式下,一个网络控制 ...

  2. JParticles 2.0 发布，打造炫酷的粒子特效

    JParticles 2.0 发布,打造炫酷的粒子特效.不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,不然...还是不啰嗦了,我们进入正题吧 简单介绍一下 JParticles 2 ...

  3. orcle :Could not initialize "D:\app\Administrator\product\11.2.0\dbhome_1\bin\oci.dll" Make sure you have the 32 bits Oracle Client installed.

    服务器重启后,数据库登录信息为空 错误信息: ---------------------------(Not logged on) - PL/SQL Developer---------------- ...

  4. git 常用的命令符

    1. linux操作命令: touch Filename:创建一个文件: mkdir 文件夹名字:创建一个文件夹: cd pathname:切换磁盘: cd ..:返回上一级: rm Filename ...

  5. 可视化之Earth NullSchool

    上两篇我们分别介绍了<Berkeley Earth>和<AQICN>两个网站,今天来看一下Earth NullSchool. 这个网站的特色是风向图,之前有一篇可视化之风向图, ...

  6. vue-router如何根据不同的用户给不同的权限

    闲聊: 小颖去年在上家公司用的vue1.0之前在做路由这块用的router.map,但是现在vue2.0里已经不能用了,所以之前解决权限问题的例子,小颖也参考不了呜呜 之前看一个美女写的:elemem ...

  7. springmvc 之 深入核心研究

    一.前言:二.核心类与接口:三.核心流程图四.DispatcherServlet说明五.双亲上下文的说明六.springMVC-mvc.xml 配置文件片段讲解 七.如何访问到静态的文件,如jpg,j ...

  8. 微信小程序 - 自定义创建

    自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录) ...

  9. 第二章完结，包含exam练习

    正则方程(Normal Equation) 梯度下降是最小化代价函数\(J(\theta)\)的一种方式,这里提出了另一种方式即正则方式不使用迭代方式:\(\theta = (X^TX)^{-1}X^ ...

  10. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...