css3 背景色 实现边框渐变运动动画
css3
#body_id {
animation: myfirst 10s ease-in-out -2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 10s ease-in-out -2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 10s ease-in-out -2s infinite alternate;
/* Opera: */
-o-animation: myfirst 10s ease-in-out -2s infinite alternate;
height: 51px;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
background: #FFFFFF;
height: 50px;
}
@keyframes myfirst {
0% {
background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace);
background: -webkit-linear-gradient(left, red, #f96, yellow, green, #ace);
background: -o-linear-gradient(left, red, #f96, yellow, green, #ace);
background: linear-gradient(left, red, #f96, yellow, green, #ace);
}
25% {
background: -moz-linear-gradient(left, #ace, red, #f96, yellow, green);
background: -webkit-linear-gradient(left, #ace, red, #f96, yellow, green);
background: -o-linear-gradient(left, #ace, red, #f96, yellow, green);
background: linear-gradient(left, #ace, red, #f96, yellow, green);
}
50% {
background: -moz-linear-gradient(left, green, #ace, red, #f96, yellow);
background: -webkit-linear-gradient(left, green, #ace, red, #f96, yellow);
background: -o-linear-gradient(left, green, #ace, red, #f96, yellow);
background: linear-gradient(left, green, #ace, red, #f96, yellow);
}
75% {
background: -moz-linear-gradient(left, yellow, green, #ace, red, #f96);
background: -webkit-linear-gradient(left, yellow, green, #ace, red, #f96);
background: -o-linear-gradient(left, yellow, green, #ace, red, #f96);
background: linear-gradient(left, yellow, green, #ace, red, #f96);
}
100% {
background: -moz-linear-gradient(left, #f96, yellow, green, #ace, red);
background: -webkit-linear-gradient(left, #f96, yellow, green, #ace, red);
background: -o-linear-gradient(left, #f96, yellow, green, #ace, red);
background: linear-gradient(left, #f96, yellow, green, #ace, red);
}
}
@-moz-keyframes myfirst
/* Firefox */
{
0% {
background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace);
}
25% {
background: -moz-linear-gradient(left, #ace, red, #f96, yellow, green);
}
50% {
background: -moz-linear-gradient(left, green, #ace, red, #f96, yellow);
}
75% {
background: -moz-linear-gradient(left, yellow, green, #ace, red, #f96);
}
100% {
background: -moz-linear-gradient(left, #f96, yellow, green, #ace, red);
}
}
@-webkit-keyframes myfirst
/* Safari 和 Chrome */
{
0% {
background: -webkit-linear-gradient(left, red, #f96, yellow, green, #ace);
}
25% {
background: -webkit-linear-gradient(left, #ace, red, #f96, yellow, green);
}
50% {
background: -webkit-linear-gradient(left, green, #ace, red, #f96, yellow);
}
75% {
background: -webkit-linear-gradient(left, yellow, green, #ace, red, #f96);
}
100% {
background: -webkit-linear-gradient(left, #f96, yellow, green, #ace, red);
}
}
@-o-keyframes myfirst
/* Opera */
{
0% {
background: -o-linear-gradient(left, red, #f96, yellow, green, #ace);
}
25% {
background: -o-linear-gradient(left, #ace, red, #f96, yellow, green);
}
50% {
background: -o-linear-gradient(left, green, #ace, red, #f96, yellow);
}
75% {
background: -o-linear-gradient(left, yellow, green, #ace, red, #f96);
}
100% {
background: -o-linear-gradient(left, #f96, yellow, green, #ace, red);
}
}
html
<div id="body_id" class="mui-bar mui-bar-tab">
<nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="home/home.html">
<span class="mui-icon "><img src="data:images/index/home_tab@2x1.png" id="home/home.html"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="found/found.html">
<span class="mui-icon "><img src="data:images/index/found_tab@2x.png" id="found/found.html"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="release/release.html">
<span class="mui-icon "><img src="data:images/index/release_tab@2x.png" id="release/release.html"></span>
<span class="mui-tab-label">发布</span>
</a>
<a class="mui-tab-item" href="message/message.html">
<span class="mui-icon "><img src="data:images/index/message_tab@2x.png" id="message/message.html"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
<a class="mui-tab-item" href="me/me.html">
<span class="mui-icon "><img src="data:images/index/me_tab@2x.png" id="me/me.html"/></span>
<span class="mui-tab-label">个人中心</span>
</a>
</nav>
</div>
当然也可以这么写,运动更流畅
#body_id {
background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace, red, #f96, yellow, green, #ace);
background: -webkit-linear-gradient(left, red, #f96, yellow, green, #ace, red, #f96, yellow, green, #ace);
background: -o-linear-gradient(left, red, #f96, yellow, green, #ace, red, #f96, yellow, green, #ace);
background: linear-gradient(left, red, #f96, yellow, green, #ace, red, #f96, yellow, green, #ace);
animation: myfirst 10s ease-in-out -2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 10s ease-in-out -2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 10s ease-in-out -2s infinite alternate;
/* Opera: */
-o-animation: myfirst 10s ease-in-out -2s infinite alternate;
height: 51px;
width: 150%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
background: #FFFFFF;
height: 50px;
}
@keyframes myfirst {
0% {
bottom:0 ;left: -50%;
}
25% {
bottom:0 ;left: 0%;
}
50% {
bottom:0 ;left: -50%;
}
75% {
bottom:0 ;left: 0%;
}
100% {
bottom:0 ;left: -50%;
}
}
@-moz-keyframes myfirst
/* Firefox */
{
0% {
bottom:0 ;left: -50%;
}
25% {
bottom:0 ;left: 0%;
}
50% {
bottom:0 ;left: -50%;
}
75% {
bottom:0 ;left: 0%;
}
100% {
bottom:0 ;left: -50%;
}
}
@-webkit-keyframes myfirst
/* Safari 和 Chrome */
{
0% {
bottom:0 ;left: -50%;
}
25% {
bottom:0 ;left: 0%;
}
50% {
bottom:0 ;left: -50%;
}
75% {
bottom:0 ;left: 0%;
}
100% {
bottom:0 ;left: -50%;
}
}
@-o-keyframes myfirst
/* Opera */
{
0% {
bottom:0 ;left: -50%;
}
25% {
bottom:0 ;left: 0%;
}
50% {
bottom:0 ;left: -50%;
}
75% {
bottom:0 ;left: 0%;
}
100% {
bottom:0 ;left: -50%;
}
}
css3 背景色 实现边框渐变运动动画的更多相关文章
- css3实现圆角边框渐变
<button class="border">112233</button> 创建button .border{ position: relative; b ...
- CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...
- CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）
一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等）
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- CSS3新特性（阴影、动画、渐变、变形、伪元素等） CSS3与页面布局学习总结——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...
- CSS3新特性（阴影、动画、渐变）
一.阴影 1.1文字阴影: text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
- CSS3之边框样式（动画过渡）
简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- 边框渐变背景色border-image: linear-gradient（）
前言 前几天无意间听说了边框渐变背景色,网上查了下,没有发现与之有关的介绍,亲测之后和大家分享一下. 边框渐变背景色 写法 border-image: gradient top right botto ...
随机推荐
- HighCharts之2D堆条状图
HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...
- Flex中一些属性总结
Flex中一些属性总结 1.buttonMode = "true" 鼠标变成手形 2.useHandCursor = "true" 鼠标变成手形
- free 或delete后指针怎么样了
free()和delete()只是把指针所指向的内存释放掉,但是并没有把指针本身删除,也没有把指针置为NULL; #include<iostream> using namespace st ...
- vxi总线
20世纪80年代后期,仪器制造商发现GPIB总线和VME总线产品无法再满足军用测控系统的需求了.在这种情况下,HP.Tekronix等五家国际著名的仪器公司成立了VXIbus联合体,并于1987年发布 ...
- （十六）java中的String
String:字符串类型,是java中最常用的引用类型,String是不可变的,java.lang.String是由final修饰,此类不可被继承. String是不可变的,指的是字符串一旦创 ...
- Linux显示指定区块大小为1024字节
Linux显示指定区块大小为1024字节 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ df -k 文件系统 1K-blocks 已用 可用 已用% 挂载点 ...
- directX视频播放------手动连接
IGraphBuilder *pigb = NULL; IMediaControl *pimc = NULL; IMediaEventEx *pimex = NULL; IVideoWindow *p ...
- [BZOJ1058][ZJOJ2007]报表统计
BZOJ Luogu 题目描述 Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一. 经过仔细观察,小Q发现统计一张报表实际上是维 ...
- JVM学习笔记一：Java运行时数据区域
1. 程序计数器 当前线程所执行的字节码的行号指示器. 2. Java虚拟机栈 线程私有,与线程具有相同生命周期.用于存储局部变量表.操作数栈.动态链表.方法出口等信息. 局部变量表存放内容: 基本数 ...
- C# 程序之间传参数，Args 接收参数的处理
备忘,或者留给暂未接触但需要了解的人. C#在一个进程内传参数方法那是相当多,但是涉及到程序之间传参数就不是那么方便了(当然socket,内存共享等方式属于另一类,此处不讨论),我们的C或者C#,亦或 ...