Question

我需要使用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;}
}

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

Answer 1

试试这个可以帮助你的插件

http://wmh.github.io/jquery-scrollbox/

http://technicalpixel.com/continous-horizontal-jquery-image-marquee/

使用CSS具有选框效果

1 个答案: