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
当然也可以这么写,运动更流畅
#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%; } }