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 ...
随机推荐
- 零基础6个月学好java月薪1w+看看他是怎么学好java的
21世纪进入信息时代,信息科技给人类的生产和生活方式带来了深刻的变革,信息产业已成为推动国家经济发展的主导产业之一,Java作为含金量极高的一门IT技术,很多人希望从事这个行业,那么想学好Java,要 ...
- Luogu P3412 仓鼠找$sugar$ $II$
Luogu P3412 仓鼠找\(sugar\) \(II\) 题目大意: 给定一棵\(n\)个点的树, 仓鼠每次移动都会等概率选择一个与当前点相邻的点,并移动到此点. 现在随机生成一个起点.一个终点 ...
- Zabbix 微信报警Python版（带监控项波动图片）
#!/usr/bin/python # -*- coding: UTF- -*- #Function: 微信报警python版(带波动图) #Environment: python import ur ...
- Ambari大数据的管理利器
概述 一个完全开源的管理平台,用于供应,管理,监控和保护Apache Hadoop集群.Apache Ambari客户管理和操作Hadoop集群 Apache Ambari作为Hortonworks数 ...
- hadoop新增kerberos租户
第一步 在kerberos服务器所在主机 通过kadmin.local,也可以通过kadmin 输入用户密码登录 kadmin.local: addprinc -randkey it1@STARYEA ...
- Windows下Python环境的搭建
我刚开始接触Python没多久,当然这也是为初学者来更好的去入门Python,我电脑上既跑着Windows也跑着Red Hat的Linux,相比较而言,开发我还是更青睐于Linux系统,很多开发工具红 ...
- sprintf函数使用
功能 把格式化的数据写入某个字符缓冲区. 所需头文件 stdio.h 原型 int sprintf( char *buffer, const char *format, [ argument] - ) ...
- 关于OPC UA Helper 命名空间中的OpcUaClient 类中的订阅函数的更改
原函数是opcUaClient.MonitorValue("ns=4;s=MAIN.d", new Action<double, Action>(MonitorTest ...
- css样式加载顺序
css样式加载顺序: A: id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 B: 如果要让某个样式的优先级变高,可以使用!important来指定: .clas ...
- JavaScript编码规范（2）
变量 [强制] 变量.函数在使用前必须先定义. // good var name = 'MyName'; // bad name = 'MyName'; [强制] 每个 var 只能声明一个变量. 解 ...