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

 <!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. sim800 gprs发送数据的AT流程

    switch(send_flag) { case 1: uart_send(&huart4,"AT\r\n",4); //AT break; case 2: uart_se ...

  2. shiro重新赋值权限

    /** * 重新赋值权限(在比如:给一个角色临时添加一个权限,需要调用此方法刷新权限,否则还是没有刚赋值的权限) * @param myRealm 自定义的realm * @param usernam ...

  3. Android开发之Git配置

    Android开发之Git配置 1.首先git配置: 输入命令: git config --global user.name "xxx.xx" git config --globa ...

  4. Mysql安装出现=========== install/remove of the Service Denied

    在安装mysql过程中遇到一个问题  install/remove of the Service Denied,这个问题说明自己没有安装和删除的权利,原因是自己在运行cmd过程是没有使用管理员身份运行 ...

  5. Excel字符串连接

    1.利用&连接. ="('"&A4&"','"&B4&"','"&C4&" ...

  6. BIOS MCSDK 2.0 学习笔记（一）

    MCSDK简介 BIOS MCSDK是为TI的高性能多核DSP提供的一套组件,包括: SYS/BIOS实时操作系统 Chip support libraries, drivers, and basic ...

  7. 20145218&20145240 《信息安全系统设计基础》实验三 实时系统的移植

    课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)刘士嘉 张晓涵 学号:(按贡献大小排名)20145240 20145218 指导教师:娄嘉鹏 实验日期:2016.11.17 实验时 ...

  8. Fibonacci(斐波那契数列)的最佳实践方式(JavaScript)

    1)低级版本 var fibonacci = function(n) { if (n == 0 || n == 1) { return n; } else { return fibonacci(n - ...

  9. Oracle 数据库特殊查询总结

    1. 查询本节点及本节点以下的所有节点: select * from table1 c start with c.p_id='0000000' connect by prior c.id=c.p_id ...

  10. "Couldn't communicate with a helper application" in Xcode 7

    解决方案 xcrun git config --global user.email you@yourdomain.com xcrun git config --global user.name &qu ...