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="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="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="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="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="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%;
                }
            }