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 ...
随机推荐
- 神经网络ANN——SPSS实现
神经网络[] 一.起源与历史 1.与传统统计方法的区别 传统线性回归模型可通过最小平方方法获取知识并在回归系数存储知识.在此意义下,其为神经网络.实际上,您可以证明线性回归为特定神经网络的特殊个案.但 ...
- com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown database 'user'
1.错误描述 2014-7-12 21:06:05 com.mchange.v2.c3p0.impl.AbstractPoolBackedDataSource getPoolManager 信息: I ...
- PCI-E配置MSI中断流程解析
在传统的pci中断体系中,每一个pci总线上的设备被分配一个特定的中断号,然后当设备需要中断cpu时,设备直接发出int信号,然后在cpu的inta引脚拉低的时候将自己的中断号放在数据总线上,一切都要 ...
- B2C经典查询，统计 绝对用的上，根据日期分组统计当天各种支付方式的销售数量和销售额
declare @sql varchar(8000) set @sql = 'select CONVERT(varchar(10), OrderDate, 120) as 日期' select @sq ...
- freemarker.template.TemplateException:Error executing macro:mainSelect
1.错误描述 freemarker.template.TemplateException:Error executing macro:mainSelect require parameter:id i ...
- ssh_Connection reset by peer报错
连接SSH时,产生了一下错误----->Read from socket failed: Connection reset by peer 首先查看日志 tail -f /var/log/aut ...
- vue常用的网址
http://cn.vuejs.org/v2/guide/routing.html#官方路由 https://unpkg.com/vue-router@2.3.1/dist/vue-router.js
- 【BZOJ4916】神犇和蒟蒻（杜教筛）
[BZOJ4916]神犇和蒟蒻(杜教筛) 题面 BZOJ 求 \[\sum_{i=1}^n\mu(i^2)\ \ 和\ \sum_{i=1}^n\phi(i^2)\] 其中\[n<=10^9\] ...
- 【CJOJ1603】【洛谷1220】关路灯
题面 Description 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老常就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏一盏地关掉 ...
- 【learning】二分图最大匹配的König定理
[吐槽] 嗯好吧这个东西吧..其实是一开始做一道最小点覆盖的题的时候学到的奇妙深刻的东西 然后发现写了很长 然后就觉得不拎出来对不起自己呀哈哈哈哈 咳咳好的进入正题 [正题] 在这里码一下最小点覆盖的 ...