Question

我正在尝试使用网络上的一些示例来构建CSS代码。我把一些似乎有用的东西放在一起，除了它只滚动前4个列表项。在第4项之后，它会滚动回到顶部并重新开始。

我无法弄清楚是什么让它重新开始，以及如何显示第5项。我希望能够滚动浏览可能数百项的列表。

代码....

＆＃13;

    @keyframes ticker {
    	0%   {margin-top: 0}
    	25%  {margin-top: -30px}
    	50%  {margin-top: -60px}
    	75%  {margin-top: -90px}
    	100% {margin-top: 0}
    }
    
    .news {
      box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
      width: 300px;
      height: 30px;
      margin: 20px auto;
      overflow: hidden;
      border-radius: 4px;
      padding: 3px;
      -webkit-user-select: none
    } 
    
    .news span {
      float: left;
      color: #fff;
      padding: 6px;
      position: relative;
      top: 1%;
      border-radius: 4px;
      box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
      font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none;
      cursor: pointer
    }
    
    .news ul {
      float: left;
      padding-left: 20px;
      animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
      -webkit-user-select: none
    }
    
    .news ul li {line-height: 30px; list-style: none }
    
    .news ul li a {
      color: #fff;
      text-decoration: none;
      font: 14px Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none
    }
    
    .news ul:hover { animation-play-state: paused }
    .news span:hover+ul { animation-play-state: paused }
    
    /* OTHER COLORS */
    .red { background: #d23435 }
    .red span { background: #c22b2c }

＆＃13;

    
    
    <div class="news red">
    	<span>Latest News</span>
    	<ul>
    		<li><a href="#">Text 1 - Short Description</li>
    		<li><a href="#">Text 2 - Short Description</a></li>
    		<li><a href="#">Text 3 - Short Description</a></li>
    		<li><a href="#">Text 4 - Short Description</a></li>
    		<li><a href="#">Text 5 - Short Description</a></li>
    	</ul>
    </div>

＆＃13;

Answer 1

100% {margin-top: 0}

该行正在重置margin-top，所以它会重新开始...如果你尝试margin-top：-120px，你可以看到第5项。

（但是， the ticker 滚动数百个项目，使用CSS，对于UI / UX和文件大小来说听起来很糟糕......你可能需要JavaScript）。

Answer 2

看到这可能有帮助。

https://plnkr.co/edit/gbTSTc6CMuCitYCN6iSO?p=preview

截至动画 animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;

上面的代码是诀窍，首先它调用动画（通过名称“ticker”已经声明）然后10s时间动画，cubic-bezier然后键入并最终循环它{{ 1}}次。

CSS自动收报机没有完全正常工作

2 个答案: