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真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...
随机推荐
- Android文件存储
文件存储是Android中最基本的一种数据存储方式,它不读存储的内容进行任何的格式化处理,所有数据原封不动的保存在文件之中.如果想用文件存储的方式保存一些较为复杂的数据,就需要定义一套自己的格式规范, ...
- centos 开机启动服务
一.启动脚本 /etc/rc.local 启动 最简单的一种方式,在启动脚本 /etc/rc.local (其实 /etc/rc.local 是/etc/rc.d/rc.local 的软链接文件,实际 ...
- table清除样式大全
table{width:100%;text-align:center;border-collapse:collapse;border-spacing:1;border-spacing:0; }tabl ...
- [Docker] Docker简介
一.简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间 ...
- Linux中修改环境变量导致大量命令不可用的解决办法
如果搞死环境变量别慌张.因为ls等命令都不能使用了,所以先找到/usr/bin/目录 使用./sudo su命令获取root权限 然后在进入/etc目录 利用vim profile命令 修改profi ...
- js 同for一样效果 (延迟)每秒循环一次 追加
<script type="text/javascript"> var j = 1; var timeID = null; function ...
- 【原创】xgboost 特征评分的计算原理
xgboost是基于GBDT原理进行改进的算法,效率高,并且可以进行并行化运算: 而且可以在训练的过程中给出各个特征的评分,从而表明每个特征对模型训练的重要性, 调用的源码就不准备详述,本文主要侧重的 ...
- jQuery对象与dom对象的转换
一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的 ...
- 学习PYTHON之路， DAY 5 - PYTHON 基础 5 (装饰器，字符格式化，递归，迭代器，生成器)
---恢复内容开始--- 一 装饰器 1 单层装饰器 def outer(func): def inner(): print('long') func() print('after') return ...
- Objective－C（ Foundation框架 一 NSFileManager）
NSFileManager 用来管理文件系统的 它可以用于常见的文件,文件夹操作(拷贝,剪切,创建) NSFileManager使用了单例模式(Singleton) 使用defaultManager可 ...