使用css滚动平铺图像

Question

我希望有一排3张图像,每行包含大约10张图像.

图像尺寸为270x270px,应该像您想象的那样在屏幕上从右到左浮动云.

我希望顶行的图像从右到左,中间是相反的方向,底部与顶部相同但是以不同的间隔.

我不是100%肯定如何完成这个,我是CSS动画的新手.

我已尝试在列表中浮动列表项,但浏览器似乎会在窗口内部剪切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;
}

唯一的问题是我必须连续两次放置所有元素,所以它看起来像一个无限滚动...