Question

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

图像尺寸为270x270像素，应该像您想象的那样在屏幕上从右到左浮动云。

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

我不是100％肯定如何完成这项工作，而且我是CSS动画的新手。

我已尝试在列表中浮动列表项，但浏览器似乎会在窗口内部剪切ul并且不会让它浮出屏幕。

see image for details

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

非常感谢任何入门帮助。

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

首先你需要一个包装div，它的宽度是图像的三倍，这样它一次可以显示3个图像。
设置换行样式：position：relative;溢出：隐藏;
在该div中创建行div，10个图像，并使用＆＃39; position：abolute; left：0;＆＃39; ，然后你可以使用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/

使用css滚动平铺图像

3 个答案: