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

 <!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. python多线程

    python多线程有两种用法,一种是在函数中使用,一种是放在类中使用 1.在函数中使用 定义空的线程列表 threads=[] 创建线程 t=threading.Thread(target=函数名,a ...

  2. C# for循环 循环中先求长度还是使用list.Count，哪个效率高

    这种问法可能问的不好.应该说成是第一种方法完全没有必要,很多人可能以为那样会为代码带来效率,而实际上是不会给效率带来任何提升. 因为事实上,索引器内部,为了安全期间,还是会去求整个list的count ...

  3. 数据库 MySQL安装图解

    MySQL安装图解 一.MYSQL的安装 1.打开下载的mysql安装文件,双击运行mysql-5.5.40-win32.msi. 2.选择安装类型,有"Typical(默认)". ...

  4. C# 编程实现非自相交多边形质心

    计算公式公式: http://en.wikipedia.org/wiki/Centroid#Centroid_of_polygon 多边形的质心: 一个非自相交的n个顶点的多边形(x0,y0), (x ...

  5. js中对象 类 实例的区别 数据类型 创建对象

    类是对象的具体细分,实例是类中的一个具体事物. 基本数据类型和 引用数据类型 基本数据类型:numble string undefined null 引用数据类型:对象和函数 对象数据类型又细分为:对 ...

  6. Load Runner录制C/S客户端

    1.    打开应用程序 2.    点击如下菜单 弹出窗口如下 3.    点击New,弹出窗口如下,选择Web(HTTP/HTML) 4.    点击Create,弹出窗口 5.    点击OK, ...

  7. FileFilter 遍历某个目录下文件名含有某个字符的文件

    由于IIS版本的升级,造成了文件名中含有“+”的特殊字符的文件(多数是图片)在网页中不能被访问,于是必须查找当前目录下含有多少这样的文件,从而制定最佳的解决方案. 废话少说,直接上核心代码: publ ...

  8. UEditor手动调节其宽度

    其高度一般不考虑,给个初始高度,然后任其自动扩展就行,对于其宽度,有两种思路,一种是调节其所在的DIV的宽度,让其自动填充,另一种是直接调节编辑器的宽度: adjust_editor_size: fu ...

  9. ios下input获取焦点以及在软键盘的上面

    <!----/此方法基于zepto.min.js--> <!--/div元素没有blur和focus事件,blur focus 只适用于input 这类的表格元素--> < ...

  10. mongodump 备份

    规划 副本集,其中加了个隐藏节点,用来做备份,所以备份脚本直接在隐藏节点做,目前数据不大,直接本机磁盘存储,后续如果数据集大,那么在本地存最近一天的备份,远程根据需求存储几天的备份 创建备份用户 db ...