正文
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%;
}
}
