css的animation怎么设置图片循环播放（无后退）而不是播完最后一张又倒退回第一张放

html-css030

css的animation怎么设置图片循环播放（无后退）而不是播完最后一张又倒退回第一张放,第1张

肯定是做2张同样的第一张图片的，做的不好的视觉上会认为有退回去的感觉，那是没有理解这个循环的本质，在css里，计算机不会把这些图片看成桶状去循环，图片永远是平面的，所以第一张图片过渡时间+最后一张图片过渡时间=其他任意一张图片的过渡时间，这样衔接才完美，由于人眼的视觉停留错位差，你不能让图片过渡时间过长，每个人的视觉停留时间是不一致的，你可以自己设定你认为的时间，比如5张图片5秒循环完，也就是duration设置5s，必须设置direction，速度曲线根据自己喜好设，没有动感的过渡是不完美的

左边的div使用图片左上角，尺寸要相同

右边的div使用图片的右下角，尺寸要相同。

关于中间循环，我建议你把中间的那个色块的宽扩大到与图片的宽度相同，也就是让图片中间不要有空白部分。

然后中间div就可以循环这个色块，而不用担心会出现空白了。

不知道讲清楚没。

<DIV id=demo_1 style="OVERFLOW: hiddenHEIGHT: 136px">

<DIV id=demo1_1>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

<div id=gleft>

<a href=""><img src="" border="0" width=150 height="120"/></a>

</div>

</DIV>

<DIV id=demo2_1></DIV></DIV>

<SCRIPT>

var speed=25

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT>

其中<div id=gleft>这里的gleft的样式你自己定义下就OK了