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真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...
随机推荐
- js跨域_jsonP
$.ajax("url", type:"get", dataType:"jsonp", jsonp:"callback" ...
- SQL Server Reporting Service(SSRS) 第一篇 我的第一个SSRS例子
很早就知道SQL SERVER自带的报表工具SSRS,但一直没有用过,最近终于需要在工作中一展身手了,于是我特地按照自己的理解做了以下总结: 1. 安装软件结构 SSRS全称SQL Server Re ...
- PacBio三代全长转录组/Iso-Seq技术及案例分析
参考:产品手册 PacBio三代全长转录组有什么优势? 近年来,随着高通量测序技术的发展,转录组测序已经成为研究基因表达调控的主要手段.但二代的转录本重构准确率很低,三代可以直接得到全长转录本,无需组 ...
- 编写我的第一个CGI代码——python学习
在编程学习网站学习Python语言,学习到cgi编程章节遇到了一些小问题,课程介绍的为linux环境的Apache配置方法,具体如下: [linux环境配置方法:] 在进行CGI编程前,确保您的Web ...
- 解决javascript动态改变img的src属性图片不显示问题
首先讲下这个bug的出现的情况,页面中有<a href="JavaScript:void(0)" onclick="document.getElementById( ...
- the usage of map.put
这个不用要的那么详细,对于应用来说,比如举个例子: Map map = new HashMap();map.put("key","value");这样就存入了一 ...
- JavaScript进阶知识点（慕课）
JavaScript能做什么? 1.增强页面动态效果(如:下拉菜单.图片轮播.信息滚动等) 2.实现页面与用户之间的实时.动态交互(如:用户注册.登陆验证等) 一. 数组 var myarray=n ...
- nodejs学习篇
最近在找工作,然后都说会个后台语言更好,选来选去,觉得nodejs比较有意思,就开始着手学这个了. 其实个人觉得,没有人领一下或者没有本好书去跟着做,这样的学习实在特别累,像我这种刚入门的菜鸟,完全搞 ...
- Python笔记总结week6
关于创建.调用模块 1.我们创建一个模块commons.py, 并且在文件中写以下三个函数: def login(): print('登录') def logout(): print('退出') d ...
- C#精髓 第四讲 GridView 72般绝技
http://blog.csdn.net/21aspnet/article/details/1540301