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

 <!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. PHP绘图

    创建图像的一般流程1.设定标头,告诉浏览器你要生成的绘图类型.2.创建一个图像区域,以后的操作都将基于此图像区域.3.在空白图像区域绘制填充背景.4.在背景上绘制图形轮廓输入文本.5.输出最终图形.6 ...

  2. IAR #pragma vector 中断入口地址

    在IAR编译器里用关键字来__interrupt来定义一个中断函数.用#pragma vector来提供中断函数的入口地址. #pragma vector = 0x12    //定时器0溢出中断入口 ...

  3. Android N做了啥

    Android N做了哪些改变 一.    性能改善 Doze超级省电模式 手机在关屏同时没有充电的情况,在一段时间后会进入打盹状态,第一阶段会停掉同步.作业.网络等访问,第二阶段会停掉app的位置服 ...

  4. ArcGIS创建tpk切片缓存

    一. 背景知识 1. tpk是什么? 从地图或底图生成切片,并将切片进行打包从而创建单个压缩的 .tpk 文件.切片包(.tpk)是在地图或栅格数据集中能作为 Web 切片或 Web 高程图层发布的一 ...

  5. python——有一种线程池叫做自己写的线程池

    这周的作业是写一个线程池,python的线程一直被称为鸡肋,所以它也没有亲生的线程池,但是竟然被我发现了野生的线程池,简直不能更幸运~~~于是,我开始啃源码,实在是虐心,在啃源码的过程中,我简略的了解 ...

  6. z-index深入理解

    [CSS深入理解之z-index]听课总结 (http://www.imooc.com/learn/643)   一.z-index基础知识 1.z-index的含义 z-index属性指定了元素及其 ...

  7. javac 导入第三方jar包

    如果是导入一个包,只需要 javac -classpath xxx/xxx/xxx.jar xxx.java 即可 如果有多个包,windows下用分号隔开,Lunix下用冒号隔开即可.

  8. easyui datagrid 分页

    //初始化dategrid $('#tt').datagrid({ url:null, pagination:true, pageSize:, pageNumber:, rownumbers:true ...

  9. Java8之——简洁优雅的Lambda表达式

    Java8发布之后,Lambda表达式,Stream等等之类的字眼边慢慢出现在我们字眼.就像是Java7出现了之后,大家看到了“钻石语法”,看到了try-with-resource等等.面对这些新东西 ...

  10. .NET中的yield关键字

    浅谈yield http://www.cnblogs.com/qlb5626267/archive/2009/05/08/1452517.html .NET中yield关键字的用法 http://bl ...