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

-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. css如何让div和页面等高？

    我们都知道,只要是block状态的标签,宽度和父级等宽,或者设置宽度100%也可以等宽,但设置高度100%是不管用的,那么如何让标签和页面等高呢,除了用js去动态计算设置高度值,用css也可以 只要将 ...

  2. linq中给字段添加别名

    linq 是我们在查询中经常回用到的一种形式,比如我们创建一个类,然后List<添加> 并绑定到表格中 public class Modeltest { string id; public ...

  3. JavaScript中的数组

    数组 (1).数组的定义 数组是值的有序集合 javascript数组是无类型的:数组元素可以是任意类型,并且同一个数组的不同元素也可能有不同的类型. 每个值叫做一个元素,而每个元素在数组中有一个位置 ...

  4. 聊聊vue组件开发的“边界把握”和“状态驱动”

    vue有着完整的组件化开发机制,但是官网只给了开发的方式,对于开发规范以及组件化开发的最佳实践,还需要我们来摸索.本文就平时开发中的经验来谈谈“把握边界”和“状态驱动”这两个话题. 边界把握 边界把握 ...

  5. asp.net core中负载均衡场景下http重定向https的问题

    上周欣喜地发现,微软官方终于针对 asp.net core 在使用负载均衡的情况下从 http 强制重定向至 https 的问题提供了解决方法. app.UseForwardedHeaders(new ...

  6. 第2章 系统用户/组管理(2) su和sudo

    本文目录: 2.1 su 2.2 sudo 2.2.1 /etc/sudoers文件 2.2.2 sudo和sudoedit命令 2.1 su 切换用户或以指定用户运行命令. 使用su可以指定运行命令 ...

  7. vue-resource promise兼容性问题

    背景 其实这个问题在之前的项目开发中就出现过,但是当初只解决问题了,并没有针对问题作总结:于是乎今天踩到了自己埋的坑,所以决定记录一下.那么到底是什么问题呢?就是"在安卓低版本,如果你在vu ...

  8. 多个项目MyEclipse中启动出现OutOfMemoryError: PermGen space如何解决

    在MyEclipse中启动程序运行,报错java.lang.OutOfMemoryError: PermGen space应该怎么办?这是eclipse 内存不够的原因. PermGen space的 ...

  9. scrapy设置"请求池"

    scrapy设置"请求池" 引言 相信大家有时候爬虫发出请求的时候会被ban,返回的是403错误,这个就是请求头的问题,其实在python发出请求时,使用的是默认的自己的请求头,网 ...

  10. 获取当前 系统时间 + 获取当前URL 键值；

    一://系统当前时间 function show(){ var mydate = new Date(); var str = "" + mydate.getFullYear() + ...