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

-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. 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

    最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...

  2. FLAnimatedImageView处理gif过程

    FLAnimatedImageView处理gif过程 时间控制原理 GIF图片每一帧的delayTime可能都不一样: 在展示下一帧的时间控制机制,不能根据以第一帧为准: 或总动画时长除以帧数来简单做 ...

  3. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  4. Linux下串口通信工具minicom的用法

    一.查看串口设备 例如,将USB转串口线插入交换机Console口后,执行命令:$ll /dev/ttyUSB* 二.连接串口设备 $sudo minicom -D /dev/ttyUSB0 三.设置 ...

  5. VSTO在幻灯片里面添加按钮对象

    //添加Form窗体,窗体中添加Image控件,单击弹出"PPT"信息提示 //命名引用:using MF = Microsoft.Vbe.Interop.Forms; priva ...

  6. C# 计时器写法

        刚才一个交流群里有人问计时器怎么写,正好我也不太熟,就写了个demo,和大家分享一下这个是参考师傅的写的! 计时器有好多种写法,这里给大家推荐一个性能比较好的,用dispatchertimer ...

  7. Codeforces Round #419 (Div. 2)

    1.题目A:Karen and Morning 题意: 给出hh:mm格式的时间,问至少经过多少分钟后,该时刻为回文字符串? 思路: 简单模拟,从当前时刻开始,如果hh的回文rh等于mm则停止累计.否 ...

  8. XCOM2中敌对生物设计分析（Aliens篇）

    Aliens Aliens作为游戏设定中入侵的外星人,有各式外貌及奇特的战斗方式,掌握一些高能科技或利用精神力量进行攻击 Sectoid 使用灵能战斗的外星人,并无高级版本,初级便会使用精神控制,生命 ...

  9. 《JavaScript高级程序设计》笔记一

    第一章 JavaScript简介 一.JavaScript的起源 JavaScript诞生于1995年.当时,它的主要作用是处理一些输入验证操作.之前的话,都是把表单数据发送到服务器端,然后再去判断有 ...

  10. shell 中最常使用的 FD (file descriptor)

    在 shell 程式中,最常使用的 FD (file descriptor) 大概有三个, 分别是: 0 是一个文件描述符,表示标准输入(stdin)1 是一个文件描述符,表示标准输出(stdout) ...