html - 垂直滚动文本问题

Question

我在 CSS 中使用滚动垂直文本，示例中有 4 个不同的文本，但是当它减少到 2 个时，它显示不可见的空格，我怎样才能让代码只适用于 2 个文本？

#tickr-box 
{
background: #D3D3D3;
max-width: 550px;
padding: 3px;
margin: 0px auto 0px auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.tickr-title 
{
color: #FFFFFF;
font: bold 18px arial, sans-serif;
background: #2A75C1; 
padding: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

#tickr-scroll ul
{
margin: 0px;
padding: 0px;
border: 0px;
vertical-align: baseline;
list-style: none;
}

#tickr-scroll 
{
background: #4E91D5;
height: 27px;
margin: 3px auto 0px auto;
overflow: hidden;
padding: 0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

#tickr-scroll li 
    {
    color: #FFFFFF;
    font: normal 18px arial, sans-serif;
    line-height: 26px;
    }

#tickr-scroll a 
{
color: #FFFFFF;
text-decoration: none;
}

#tickr-scroll a:hover 
{
color: #CCFF99;
text-decoration: none;
}

#tickr-scroll ul
{
padding: 0px 6px 0px 6px;
-webkit-animation: tickr 12s cubic-bezier(1, 0, .5, 0) infinite;
-moz-animation: tickr 12s cubic-bezier(1, 0, .5, 0) infinite;
-ms-animation: tickr 12s cubic-bezier(1, 0, .5, 0) infinite;
animation: tickr 12s cubic-bezier(1, 0, .5, 0) infinite;
}

#tickr-scroll ul:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}

@-webkit-keyframes tickr {
0%   { margin-top: 0; }
25%  { margin-top: -26px; }
50%  { margin-top: -52px; }
75%  { margin-top: -78px; }
100% { margin-top: 0; }
}

@-moz-keyframes tickr {
0%   { margin-top: 0; }
25%  { margin-top: -26px; }
50%  { margin-top: -52px; }
75%  { margin-top: -78px; }
100% { margin-top: 0; }
}

@-ms-keyframes tickr {
0%   { margin-top: 0; }
25%  { margin-top: -26px; }
50%  { margin-top: -52px; }
75%  { margin-top: -78px; }
100% { margin-top: 0; }
}

@keyframes tickr {
0%   { margin-top: 0; }
25%  { margin-top: -26px; }
50%  { margin-top: -52px; }
75%  { margin-top: -78px; }
100% { margin-top: 0; }
}

这是带有 4 个文本列表的 HTML，其中我只需要 2 个文本但交替滚动，如果可能以显示无限循环(它当前显示第一个文本，然后是第二个，然后是第三个，然后是第四个，然后再次显示第一个，我们在它快速滚动到顶部时看到其他 3 个......)

<div id="tickr-box">
              <div id="tickr-scroll">
                <ul>
                  <li>text 1</li>
                  <li>text 2</li>
                  <li>text 3</li>
                  <li>text 4</li>
                </ul>
              </div>
            </div>
          </div>

Answer 1

好吧，基本上你需要改变你的@keyframes，这样你只剩下两个偏移量(第一个文本为0，-26px 对于第二个文本)。然后，还将百分比调整为 0%(动画开始)、50%(动画中间)和 100%(动画结束):

@keyframes tickr {
  0%   { margin-top: 0; }
  50%  { margin-top: -26px; }
  100% { margin-top: 0; }
}

您还需要调整时间，而不是 12s 您的动画现在只需要 6s:

#tickr-scroll ul {
  padding: 0px 6px 0px 6px;
  animation: tickr 6s cubic-bezier(1, 0, .5, 0) infinite;
}

如果你想保留特定于 ventor 的 CSS 定义(前缀为 -webkit、-moz 和 -ms)，你也必须改变它们。我在我的代码示例中只使用了常用的 @keyframes 元素。

在此处查看工作演示:JS Bin example