0

我找到了一个教程，展示了如何制作基于 CSS 的新闻自动收报机，但无论包含多少列表项，它都需要输入声明（教程中有 4 个）。

如果我添加另外四个列表项，自动收报机仍然只会到第四个，然后回到第一个（因为 CSS 中的关键帧）

有没有办法可以将 CSS 动画应用于无限数量的列表项，因为它们被添加？

HTML

<div id="news-ticker">
<span>Latest News</span>
<ul>
    <li><a href="#">Article one</a></li>
    <li><a href="#">Article two</a></li>
    <li><a href="#">Article three</a></li>
    <li><a href="#">Article four</a></li>
</ul>
</div>

CSS

#news-ticker {
    overflow: hidden;
    height:1em;
    position: relative;
    padding:3px;
} 
span {
    float: left;
    position: relative;
}

ul {
    float: left;
    padding-left: 20px;
    -webkit-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    -moz-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    -ms-animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
    animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
}
ul:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    animation-play-state: paused;
}
li {line-height:1em;margin-bottom:.5em;}
#news_ticker a {
    color: #000;
    text-decoration: none;
    font-size: 13px;
}

@-webkit-keyframes ticker {
    0%   {margin-top: 0;}
    25%  {margin-top: -25px;}
    50%  {margin-top: -50px;}
    75%  {margin-top: -75px;}
    100% {margin-top: 0;}
}
@-moz-keyframes ticker {
    0%   {margin-top: 0;}
    25%  {margin-top: -25px;}
    50%  {margin-top: -50px;}
    75%  {margin-top: -75px;}
    100% {margin-top: 0;}
}
@-ms-keyframes ticker {
    0%   {margin-top: 0;}
    25%  {margin-top: -25px;}
    50%  {margin-top: -50px;}
    75%  {margin-top: -75px;}
    100% {margin-top: 0;}
}
@keyframes ticker {
    0%   {margin-top: 0;}
    25%  {margin-top: -25px;}
    50%  {margin-top: -50px;}
    75%  {margin-top: -75px;}
    100% {margin-top: 0;}
}

http://jsfiddle.net/ab0axdsg/

4

0 回答 0