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 ...
随机推荐
- freemarker报错之五
1.错误描述 freemarker.core.ParseException: Token manager error: freemarker.core.TokenMgrError: Lexical e ...
- Java代码输出是“father”还是“child”（二）
1.实例 /** * 以下代码输出的结果是 */ package com.you.model; /** * @author YouHaidong * 输出的结果 */ public class Fat ...
- 提取DirectShow中视频采集的数据
DirectShow中,数据流(Data Flow)都是依次流过各个Filter的.它对数据的管理也有自己的方法,而且并没有向用户提供一个统一的接口,供用户操作数据流.这里以提取视频采集在的每帧为位图 ...
- Django学习-13-simple_tag使用
一些HTML方法 {{item.event_start | date:"Y-m-d H:i:s"}} {{bi ...
- Qt keyPressEvent
keyPressEvent是QWidget里面的函数,所以凡是继承自QWidget的类都可以通过实现这个函数来完成对按键事件的响应. 要让当前的widget能够响应按键事件,最先需要做的事情是,调用: ...
- .Net Core使用Redis的一个入门简单Demo
本例子讲述一个在.Net core环境中对Redis数据库进行增删改查操作. 首先,要安装好Redis数据库,至于怎么安装,本文不再赘述,可以自行百度,有很详细的教程. 安装好之后,在CMD中输入 r ...
- JS对select动态添加options操作（主流浏览器兼容）
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
- RLS自适应滤波器中用矩阵求逆引理来避免求逆运算
在RLS自适应滤波器的实现过程中,难免不涉及矩阵的求逆运算.而求逆操作双是非常耗时的,一个很自然的想法就是尽可能的避免直接对矩阵进行求逆运算.那么,在RLS自适应滤波器的实现中,有没有一种方法能避免直 ...
- 【learning】kd-tree
吐槽 kd-tree这个东西很早就听说过了但是qwq一直没有去了解 (原因的话..啊哈哈听说是什么跟二维平面之类的东西有关的所以就怂掉了qwq没错就是怂qwq) 但其实好像..真的很暴力啊qwq知道思 ...
- cache 订单队列 - TP5
使用cache实现一个简单粗糙的订单推送队列 Linux 定时任务 * * * * * /usr/bin/curl http://tc.m.com/test.php /** * User: [一秋 ...