Question

我正在尝试在完整的CSS3中创建一个选框，但它不会像它应该移动

HTML：

<div id="marquee">
    <ul class="li_patr">
        <li class="unstiled_li"><img id="element" src="img/thumb1.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb2.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb3.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb4.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb5.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb6.png"></li>
        <li class="unstiled_li"><img id="element" src="img/thumb7.png"></li>
    </ul>
</div>

CSS：

#marquee{
width: 960px;
height: 160px;
overflow: hidden;
}
.li_patr{
width: 1500px;
}
.unstiled_li{
list-style: none;
margin-top: 0;
-webkit-animation: marquee 25s ease-in-out infinite;
}

css中的动画：

@-webkit-keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@-moz-keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@-ms-keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@-o-keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
@keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}

这是我替换一些图像的jsfiddle：http://jsfiddle.net/3ZaGk/

Answer 1

您可以尝试这样的解决方案： http://jonmifsud.com/open-source/jquery/jquery-webticker/

它提供了无限的webticker。

试图在CSS3中创建一个选取框

1 个答案: