Question

所以我找到了很好的仅限CSS的新闻报道here，我也实现了它：

http://jsbin.com/xitazujuko/edit?html,css,output

我的问题是它只显示了4条新闻而不是6条新闻，即使它在HTML中我输入了6：

<li>News line 1</li>
<li>News line 2</li>
<li>News line 3</li>
<li>News line 4</li>
<li>News line 5</li>
<li>News line 6</li>

有人可以告诉我在这里缺少什么吗？

Answer 1

更改此位代码，您只将高度划分为4;

@keyframes  ticker {
    0% {
        margin-top: 0
    }
    16.66666% {
        margin-top: -30px
    }
    33.33333% {
        margin-top: -60px
    }
    50% {
        margin-top: -90px
    }
    66.66666% {
        margin-top: -120px
    }
    83.33333% {
        margin-top: -150px
    }
    100% {
        margin-top: 0px
    }
}

Answer 2

在代码的这一部分：

@keyframes ticker {
    0%   {margin-top: 0}
    25%  {margin-top: -30px}
    50%  {margin-top: -60px}
    75%  {margin-top: -90px}
    100% {margin-top: 0}
}

将其更改为20%点并再添加一个：

@keyframes ticker {
    0%   {margin-top: 0}
    20%  {margin-top: -30px}
    40%  {margin-top: -60px}
    60%  {margin-top: -90px}
    80%  {margin-top: -120px}
    100% {margin-top: 0}
}

Answer 3

您可以更改以下关键帧以显示最近5条新闻（并更改您想要的其他号码）：

    @keyframes  ticker {
    0% {
        margin-top: 0
    }
    20% {
        margin-top: -30px
    }
    40% {
        margin-top: -60px
    }
    60% {
        margin-top: -90px
    }
    80% {
        margin-top: -120px/* this */
    }
    100% {
        margin-top: 0
    }
}

你也可以根据需要改变时间！

    .news ul {
    float: left;
    padding-left: 10px;
    animation: ticker 25s cubic-bezier(1, 0, .5, 0) infinite;/* now set to 25s */
    -webkit-user-select: none
}

抱歉我的英语不好：）

CSS动画未显示所有内容

3 个答案: