使用CSS具有选框效果

时间:2014-01-07 11:51:42

标签: html css3

我需要使用CSS3动画来对图像赋予选框效果,因为不推荐使用html marquee标签(但非常容易使用)。html代码如下:

<div class="marquee">

    <a href="images/1.jpg"><img src="images/1.jpg"></a>
    <a href="images/2.jpg"><img src="images/2.jpg"></a> 
    <a href="images/3.jpg"><img src="images/3.jpg"></a>
    <a href="images/4.jpg"><img src="images/4.jpg"></a>
    <a href="images/5.jpg"><img src="images/5.jpg"></a>
    <a href="images/1.jpg"><img src="images/5.jpg"></a>
    <a href="images/2.jpg"><img src="images/4.jpg"></a> 
    <a href="images/3.jpg"><img src="images/3.jpg"></a>
    <a href="images/4.jpg"><img src="images/2.jpg"></a>
    <a href="images/5.jpg"><img src="images/1.jpg"></a>

    </div>

我使用的CSS3动画效果如下:

.marquee{
display:block;
position:relative;
width:1800px;
height:160px;
animation:scroll 25s ease-in-out infinite;
}

@keyframes scroll{
0% {left:0;}
100% {left:-260px;}
}

但是这个解决方案的问题在于,如果我有更多的图像,那么动画效果会提前完成,因此后面的图像永远不会显示。而且,在增加动画持续时间时,图像会非常缓慢地滑动,从而破坏了选框效果本身。任何帮助??

1 个答案:

答案 0 :(得分:-2)