css3动画之背景颜色的自动切换
因为不同浏览器内核的不同所以会产生浏览器兼容性问题
<!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动画之背景颜色的自动切换的更多相关文章
- 获取bing.com的图片并在gnome3中设置自动切换
发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- CSS实现页面背景自动切换功能
From here:http://xiaomiya.iteye.com/blog/2047728 请看效果图: 完整代码如下: <!DOCTYPE HTML> <html> & ...
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...
- css3应用之自定义选中文字的背景颜色
在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理.其实这样是很符合用户体验的.因为有很多的人会用鼠标选择着一行一行的阅读.其中就包括本人... 浏览器中默认的选中的文字颜色为白色, ...
- Android使用属性动画ValueAnimator动态改变SurfaceView的背景颜色
以下是主要代码,难点和疑问点都写在注释中: /** * 开始背景动画(此处为属性动画) */ private void startBackgroundAnimator(){ /* *参数解释: *ta ...
- Python3实现Win10桌面背景自动切换
[本文出自天外归云的博客园] 得空写了个自动切换桌面背景图片的小程序.再不写python就要扔键盘了,对vue还有那么一点好感,天天php真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...
随机推荐
- SQLServer的数据存储结构01 文件与文件组
在SQLServer中,每当新建一个数据库时,则会有一组相应的SQLServer文件被创建,这些单独的SQLServer文件构成的总体称为文件组. 一个数据库对应着一个文件组,在这个文件组里,会包括三 ...
- centos7安装redis
方法一:使用命令安装(前提是已经安装了EPEL). 安装redis: yum -y install redis 启动/停止/重启 Redis 启动服务: 1 systemctl start redis ...
- OPENGL半透明图像产生黑色光环
OPENGL提供了多种多样的混合方法,我们很容易就能实现诸如 叠加.变亮等图像混合. 我们知道一般带透明度的图像是RGBA四个通道来存储,最常的glBlendFunc是 glBlendFunc(GL_ ...
- JavaScript中的splice方法
splice方法根据传入的不同参数可分别实现删除和插入操作 使用splice(pra1,pra2,pra3)方法,需要为其提供如下参数: 1.pra1为其起始索引(即希望开始添加元素的地方) 2.pr ...
- 记一次log4j日志文件输出错误的解决
log4j错误信息:log4j:ERROR Failed to rename [D:/logs/wmts_] to [D:/logs/wmts_2015-12-21.log ]. 起因:部门网站使用B ...
- 51nod1265 四点共面
题目链接:51nod 1265 四点共面 四个点构成的三个向量a,b,c共面的充要条件是存在不全为零的实数x,y,z满足x*a+y*b+z*c=0,然后想到线代了.. 其实就是三个向量的混合积为0:( ...
- FPGA 相同模块 VIVADO synthesis综合后
显示所用的LUT as Memory结果不一致可能是什么原因导致的?
- OC — (Foundation框架-NSDate)
NSDate:是OC中处理日期时间的一个类,可以用来表示时间 获取当前的时间 NSDate *d = [NSDate date]; 创建日期时间对象 NSLog输出是当前时间 格林时间 格式化显示时间 ...
- qq客服代码
http://shang.qq.com/v3/widget.html <a target="_blank" href="http://wpa.qq.com/msgr ...
- oracle date change
select to_char(sysdate,'yyyy') from dual;-----2016select to_number(to_char(sysdate,'MM'))||'月' from ...