开心每一天1111
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <style> body{position: relative;} div#content{height:500px;border:2px solid #f00;} div#scan{height:500px;width:300px;position: absolute;;left:-100px;top:0px; background: -webkit-linear-gradient(left,rgba(200,0,0,0),rgba(200,0,0,0.3)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right,rgba(200,0,0,0),rgba(200,0,0,0.3)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right,rgba(200,0,0,0),rgba(200,0,0,0.3)); /* Firefox 3.6 - 15 */ background: linear-gradient(to right,rgba(200,0,0,0),rgba(200,0,0,0.3)); /* 标准的语法 */ } div#scan.yellow{ background: -webkit-linear-gradient(left,rgba(200,200,0,0),rgba(200,200,0,0.3)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right,rgba(200,200,0,0),rgba(200,200,0,0.3)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right,rgba(200,200,0,0),rgba(200,200,0,0.3)); /* Firefox 3.6 - 15 */ background: linear-gradient(to right,rgba(200,200,0,0),rgba(200,200,0,0.3)); /* 标准的语法 */ } </style></head><body> <div id="content" style=""> </div> <div id="scan" style=""></div> <script type="text/javascript"> $(function(){ $("#scan").animate({left:"+=1000px"},1000*20,"linear",function(){ $(this).css({left:"-100px"}); }); setInterval(function(){ $("#scan").animate({left:"+=1000px"},1000*20,function(){ $(this).css({left:"-300px"}); }); },1000*20); setTimeout(function(){ $("#scan").addClass("yellow"); },3000) }) </script></body></html>@挺问中原 提供的答案我赞同，我就不写什么其他的想法了