Html 垂直滚动文本问题_Html_Css

Html 垂直滚动文本问题

html css

Html 垂直滚动文本问题,html,css,Html,Css,我在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

我在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个文本，同时快速滚动到顶部…）



文本1
文本2
文本3
文本4

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

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; } 
                   50%  { margin-top: -26px; } 
                   100%  { margin-top: 0; } }

其工作方式相同，但动画速度较慢

您可能想看看这个：

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

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...

如果你称之为：

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

其工作方式相同，但动画速度较慢

您可能想看看这个：

嗯，基本上你需要改变你的

@关键帧

，这样你只剩下两个偏移量（

用于第一个文本，

-26px

用于第二个文本）。然后，还将百分比调整为

0%

（动画开始）、

50%

（动画中间）和

100%

（动画结束）：

您还需要调整计时，而不是

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

），您还必须修改它们。我在代码示例中只使用了stock@keyframes元素

请参见此处的工作演示：

基本上，您需要更改

@关键帧

，这样您只剩下两个偏移量（