使用CSS滚动平铺图像

Question

我希望有一排3张图片，每行大约包含10张图片。

图像尺寸为270x270像素，并且应该像在屏幕上左右浮动的云一样进行动画处理。

我希望图像的第一行从右到左，中间方向相反，而底部与顶部相同，但间隔不同。

我不确定如何做到这一点，我对CSS动画还是陌生的。

我试过在a内浮动列表项，但浏览器似乎将ul剪辑在窗口内，并且不让其从屏幕上浮动。

详情请参阅图片

图像应循环播放并继续显示图像流，而动画或放置没有中断。

任何帮助入门将不胜感激。

G

Answer 1

你是说像jsFiddle这样的东西吗？

HTML

<div class="container">
    <div class="rowContainer">
        <div class="row rtl">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>    
        </div>
    </div>
    <div class="rowContainer">
        <div class="row ltr">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>    
        </div>
    </div>
    <div class="rowContainer">
        <div class="row rtl">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
            <div class="cell">7</div>
            <div class="cell">8</div>
            <div class="cell">9</div>
            <div class="cell">10</div>    
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
@-webkit-keyframes scrollRtL {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, 0); }
}
@keyframes scrollRtL {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, 0); }
}
@-webkit-keyframes scrollLtR {
    0% { transform: translate(-50%, 0); }
    100% { transform: translate(0, 0); }
}
@keyframes scrollLtR {
    0% { transform: translate(-50%, 0); }
    100% { transform: translate(0, 0); }
}
html, body, .container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.rtl {
    -webkit-animation: scrollRtL 5s linear infinite;
    animation: scrollRtL 5s linear infinite;
}
.ltr {
    -webkit-animation: scrollLtR 5s linear infinite;
    animation: scrollLtR 5s linear infinite;
}
.rowContainer {
    position: relative;
    height: 280px;
}
.row {
    position: absolute;
    white-space: nowrap;
    font-size: 0;
}
.cell {
    font-family: verdana;
    display: inline-block;
    font-size: 36px;
    width: 270px;
    height: 270px;
    background-color: red;
    color: white;
    margin: 5px;
}

唯一的问题是我必须将所有元素连续放置两次，因此看起来像是无限滚动...

Answer 2

1. 首先，您需要一个wrap div，它的宽度是图像的三倍，以便一次可以显示3张图像。
2. 设置wrap div样式：position：relative; 溢出：隐藏;
3. 创建行div，在该div中创建10张图片，然后使用“ position：abolute; left：0;” ，则可以使用css3转换将其移动。

Answer 3

你的意思是这样吗？

<marquee behavior="scroll" direction="left" scrollamount="10"><img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>

http://jsfiddle.net/mLbkcwmf/