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

 <!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. Android文件存储

    文件存储是Android中最基本的一种数据存储方式,它不读存储的内容进行任何的格式化处理,所有数据原封不动的保存在文件之中.如果想用文件存储的方式保存一些较为复杂的数据,就需要定义一套自己的格式规范, ...

  2. VMWARE里启动kylin16.0时出现'SMBus Host Controller not enabled'(还未进入系统）

    在Vmware里安装完Ubuntu16.10,启动时出现'SMBus Host Controller not enabled'错误提示,进不到图形界面.网上搜了一下,解决办法是在图形界面里进终端窗口, ...

  3. JS控制TABLE表格在任意一行下面添加一行（有待完善）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 在线调试lua原型设计

    在规模日益增长的软件项目开发中, 如何有效的进行代码调试成为影响开发效率的致命因素之一.在当今网络游戏项目中, lua几乎成了项目脚本的标配.编译型的语言, 诸如C++, 都有良好的ide支持调试.而 ...

  5. Lua 与 Redis

    Lua 与 Redis 标签: Java与NoSQL 从 2.6版本 起, Redis 开始支持 Lua 脚本 让开发者自己扩展 Redis - 案例-实现访问频率限制: 实现访问者 $ip 在一定的 ...

  6. 错误: java.lang.reflect.InvocationTargetException

    错误: java.lang.reflect.InvocationTargetException    at sun.reflect.NativeMethodAccessorImpl.invoke0(N ...

  7. Oracle 游标

    游标的简介 游标的概念 游标是从数据表中提取出来的数据,以临时表的形式存放在内存中,在游标中有一个数据指针,在初始状态下指向的是首记录,利用fetch语句可以移动该指针,从而对游标中的数据进行各种操作 ...

  8. 使用wait()与notify()实现线程间协作

    调用sleep()和yield()的时候锁并没有被释放,而调用wait()将释放锁.这样另一个任务(线程)可以获得当前对象的锁,从而进入它的synchronized方法中.可以通过notify()/n ...

  9. Socket通信 简单实现私聊、群聊（dos命令下）

    很久以前的一个Demo,这里服务器只做转发功能,根据ID地址和端口号来标识身份,群聊和私聊只是简单实现, 服务器代码如下: import java.util.*; import java.io.*; ...

  10. CentOS6.4下基于Nginx搭建mp4/flv流媒体服务器

    我的步骤如下:1. 安装依赖包: yum install glibc.i686#yum –y update#yum -y install gcc glibc glibc-devel make nasm ...