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

-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. 抓包工具 - HttpWatch

    HttpWatch是功能强大的网页数据分析工具,集成在IE工具栏,主要功能有网页摘要.cookies管理.缓存管理.消息头发送/接收,字符查询.POST数据.目录管理功能和报告输出.HttpWatch ...

  2. threading多线程总结

    threading用于提供线程相关的操作,线程是应用程序中工作的最小单元.python当前版本的多线程库没有实现优先级.线程组,线程也不能被停止.暂停.恢复.中断. threading模块提供的类:  ...

  3. 织梦DEDECMS中的默认文件夹的名称怎么修改呢？

    1.首先找到系统配置文件,一般此文件会存放在Include目录下,文件名称为:common.inc.php.         2.打开common.inc.php,以修改模板目录templets为例, ...

  4. python学习笔记之列表与元组

    一.概述 python包含6种内建的序列,其中列表和元组是最常用的两种类型.列表和元组的主要区别在于,列表可以修改,元组则不能修改 使用上,如果要根据要求来添加元素,应当使用列表:而由于要求序列不可修 ...

  5. 关于MATLAB处理大数据坐标文件201762

    经过头脑风暴法想出了很多特征,目前经过筛选已经提交了两次数据,数据提交结果不尽如人意,但是收获很大. 接下来继续提取特征,特征数达到27时筛选出20条特征,并找出最佳搭配

  6. ASP.NET MVC5（五）：身份验证、授权

    使用Authorize特性进行身份验证 通常情况下,应用程序都是要求用户登录系统之后才能访问某些特定的部分.在ASP.NET MVC中,可以通过使用Authorize特性来实现,甚至可以对整个应用程序 ...

  7. CoolBlog开发笔记第4课:数据库模型设计

    教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 1.3 CoolBlog开发笔记第3课:创建Django应用 前言 我新书<Py ...

  8. Sql_Case_When用法

    http://wenku.baidu.com/link?url=XBnkUzGtiJFhTnQk5HbmdgndhVEYJdcfDEhSEIFeTRn9-41KMLf_49wKiydNCF-4g3Qi ...

  9. 使用 FLASH DATABASE 恢复误删除的用户

    场景描述 误 drop 了生产库中的用户 U1 U1 用户下面有 3 张表(T1-T3),表中数据如下所示: SQL> conn u1/u1 Connected. SQL> select ...

  10. schema 对象的简单介绍

    官方文档链接地址 http://docs.oracle.com/cd/E11882_01/server.112/e40540/tablecls.htm#CNCPT010 Introduction to ...