因为不同浏览器内核的不同所以会产生浏览器兼容性问题

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset='utf-8'/>

     <title>背景颜色的变换</title>

 <style type="text/css">

 div{

     width: 200px;

     height: 200px;

     background: blue;

     animation:myfirst 5s;

     -moz-animation:myfirst 5s;  /*火狐里面*/

     -webkit-animation:myfirst 5s;  /*谷歌和safair里面*/

     -o-animation:myfirst 5s; /*欧朋浏览器*/

 }

 /*火狐里面*/

 @-moz-keyframes myfirst{

     0%{background: blue}

     25%{background: red}

     50%{background: yellow}

     100%{background: green}

 }

 /*谷歌和Safari里面*/

 @-webkit-keyframes myfirst{

     0%{background: blue}

     25%{background: red}

     50%{background: yellow}

     100%{background: green}

 }

 /*欧朋浏览器*/

 @-o-keyframes myfirst{

     0%{background: blue}

     25%{background: red}

     50%{background: yellow}

     100%{background: green}

 }

 </style>

 </head>

 <body>

 <div><h1>内容是什么</h1></div>

 </body>

 </html>

 <!-- <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:200px;

 height:200px;

 background:red;

 animation:myfirst 5s;

 -moz-animation:myfirst 5s; /* Firefox */

 -webkit-animation:myfirst 5s; /* Safari and Chrome */

 -o-animation:myfirst 5s; /* Opera */

 }

 @keyframes myfirst

 {

 0%   {background:red;}

 25%  {background:yellow;}

 50%  {background:blue;}

 100% {background:green;}

 }

 @-moz-keyframes myfirst /* Firefox */

 {

 0%   {background:red;}

 25%  {background:yellow;}

 50%  {background:blue;}

 100% {background:green;}

 }

 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

 0%   {background:red;}

 25%  {background:yellow;}

 50%  {background:blue;}

 100% {background:green;}

 }

 @-o-keyframes myfirst /* Opera */

 {

 0%   {background:red;}

 25%  {background:yellow;}

 50%  {background:blue;}

 100% {background:green;}

 }

 </style>

 </head>

 <body>

 <div></div>

 <p><b>注释：</b>当动画完成时，会变回初始的样式。</p>

 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

 </body>

 </html>

  -->

备注部分是w3school上面的例子

css3动画之背景颜色的自动切换的更多相关文章

  1. 获取bing.com的图片并在gnome3中设置自动切换

    发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...

  2. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  3. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  4. CSS实现页面背景自动切换功能

    From here:http://xiaomiya.iteye.com/blog/2047728 请看效果图: 完整代码如下: <!DOCTYPE HTML> <html> & ...

  5. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  6. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  7. css3应用之自定义选中文字的背景颜色

    在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理.其实这样是很符合用户体验的.因为有很多的人会用鼠标选择着一行一行的阅读.其中就包括本人... 浏览器中默认的选中的文字颜色为白色, ...

  8. Android使用属性动画ValueAnimator动态改变SurfaceView的背景颜色

    以下是主要代码,难点和疑问点都写在注释中: /** * 开始背景动画(此处为属性动画) */ private void startBackgroundAnimator(){ /* *参数解释: *ta ...

  9. Python3实现Win10桌面背景自动切换

    [本文出自天外归云的博客园] 得空写了个自动切换桌面背景图片的小程序.再不写python就要扔键盘了,对vue还有那么一点好感,天天php真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...

随机推荐

  1. KEGG数据库

    参考:KEGG数据库中文教程 - 博奥  &[学习笔记]KEGG数据库 - 微信 学习一个技能最主要的事情你必须知道,那就是能通过它来做什么? KEGG数据库里面有什么? 如何查询某一特定的代 ...

  2. 获取$(this)子节点对象的方法

    获取$(this)子节点对象的方法: 1.children()方法: children() 方法返回被选元素的所有直接子元素. 该方法只会向下一级对 DOM 树进行遍历. 2.find()方法: fi ...

  3. Missing (Mono Script), Missing Prefab

    开始研究Google Cardboard SDK,下载了一份gvr-unity-sdk,用Unity打开里面的Samples: CastleDefense,导出XCode项目在iPhone上面运行,出 ...

  4. linux上使用shell脚本查看内存使用率

    如上的内存利用率 = [-/+buffers/cache:used]/[Mem:total ] =  6293404 / 16333656 对于free命令而言,有如下公式: total = used ...

  5. HTML 或 CSS 文件中引用的图片文件移动到任意位置

    对于一个套接字的输入操作,第一步通常涉及等待数据从网络到达,当所等待分组到达时,被复制到内核的某个缓冲区: 第二步就是把数据从内核缓冲区复制到应用进程缓冲区.通过 Session 的 createQu ...

  6. C#获取全部目录和文件

    public class FileAccess{ //储存所有文件夹名 private ArrayList dirs; public FileAccess() { dirs = new ArrayLi ...

  7. 基于jstree的 对混乱的 命名系统进行归类的 计算机软件

    本人现在就职于一家加拿大东部餐饮连锁公司的IT部门,公司旗下有4个品牌,280多家餐厅. 所有的餐厅都使用maitred 的pos软件来处理收银结账. 公司总部使用business object 对m ...

  8. 初识ReactJs（一）

    React的开发背景 ReactJS官网地址:http://facebook.github.io/react/ Github地址:https://github.com/facebook/react J ...

  9. iOS安全相关学习资料

    https://github.com/zhengmin1989/iOS_ICE_AND_FIRE  (冰与火代码) http://weibo.com/zhengmin1989?is_hot=1 (蒸米 ...

  10. 汽车驱动之家 http://bmw360.cn

    汽车驱动之家 http://bmw360.cn