Question

我必须仅使用css3创建横幅。我已经创建了一个基本结构，但它不像幻灯片横幅一样工作。我想用幻灯片等待5秒然后进一步移动，但现在它正在快速移动。 fiddle

.main{ width:500px; overflow:hidden; border:solid 1px #000; }
.banner { width:1500px; animation: myfirst 10s infinite 2s}
.one { float:left; background:#F00; height:200px; width:500px}
.two { float:left; background:#0F0; height:200px; width:500px}
.three { float:left; background:#00F; height:200px; width:500px}

@keyframes myfirst {
    from {margin-left: 0px;}
    to {margin-left:-1000px}
} 



<div class="main">
<div class="banner">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>

Answer 1

这个解决方案可以帮助你。

<div class="main">
        <div class="banner">
            <div class="one item"></div>
            <div class="two item"></div>
            <div class="three item"></div>
        </div>
    </div>
.main {
        width: 500px;
        overflow: hidden;
        border: solid 1px #000;
    }
    .banner {
        width: 1500px;
        /*animation: myfirst 15s infinite 2s*/
    }
    .one {
        float: left;
        background: #F00;
        height: 200px;
        width: 500px;
        animation: myfirst 15s infinite 2s;
    }
    .two {
        float: left;
        background: #0F0;
        height: 200px;
        width: 500px;
        animation: myfirst 15s infinite 2s;
    }
    .three {
        float: left;
        background: #00F;
        height: 200px;
        width: 500px;
        animation: myfirst 15s infinite 2s;
    }
    .item{
        position: relative;
    }
    @keyframes myfirst {
        0%{
            left: 0;
        }
        15%{
            left: 0;
        }
        30%{
            left: -500px;
        }
        45%{
            left: -500px;
        }
        60%{
            left: -500px;
        }
        75%{
            left: -1000px;
        }
        90%{
            left: -1000px;
        }
        100%{
            left: 0px;
        }
    }

你需要添加-webkit动画你自己。

用css3滑动横幅

1 个答案: