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但是交替滚动，如果可能的话显示无限循环（它当前显示的是第1个文本，然后是第2个，然后是第3个，然后是第4个并显示第一次我们看到其他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;
}

如果您想保留特定于发明人的CSS定义（前缀为-webkit，-moz和-ms），您也必须更改它们。我只在代码示例中使用了股票@keyframes元素。

请参阅此处的工作演示：JS Bin example

Answer 2

css中的@keyframe tickr注释会告诉您以下内容：

0% --> at the start of the "animation" you have no margin-top (value =0)

25% --> at 25% progress of your animation you have margin-top with value = -26 px

and so on...

这样做会改变您的保证金最高值。正如您的代码所说，边距应该从0到-26px到-52px到-78px然后再回到0，它会经过4个项目。如果您只想使用两个项目（以保持相同的速度）：

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

如果你这样称呼：

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

它的工作方式相同，但动画效果较慢。

你可能想看看这个： https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Answer 3

我相信，当有<li>或2个或不同数量的<li>时，您希望代码能够正常运行。您还希望第一个列表项显示在最后一个列表项之后，而不通过其他列表项。

纯CSS无法实现这两种目标。

您可以使用Slick之类的插件来实现这些以及其他此类自定义。

垂直滚动文本问题

3 个答案: