Question

我有一个列表，试图从顶部滚动到底部（字幕形式）。我正在使用此CSS：

// Marquee CSS
.scrolling 
{ 
height: 200px;
overflow: hidden;
position: relative;
}

.scrolling a 
{ 
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
color: white;

/* Starting position */

-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);

/* Apply animation to this element */

-moz-animation: scrolling 15s linear infinite;
-webkit-animation: scrolling 15s linear infinite;
animation: scrolling 15s linear infinite;
}

.scrolling ul {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;

/* Starting position */

-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);

/* Apply animation to this element */  
-moz-animation: scrolling 15s linear infinite;
-webkit-animation: scrolling 15s linear infinite;
animation: scrolling 15s linear infinite;
}

/* Move it (define the animation) */

@-moz-keyframes scrolling {
0%   { -moz-transform: translateY(0%); }
100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes scrolling {
  0%   { -webkit-transform: translateY(0%); }
  100% { -webkit-transform: translateY(100%); }
}
@keyframes scrolling {
  0%   {
  transform: translateY(0%);
  }
  100% {
  transform: translateY(100%);
  } 
}

可以，有点。它确实滚动了我的列表，但是隐藏了列表的很大一部分。框的大小正是我要寻找的，我的列表是完整的，但是当我尝试滚动列表时，它并不会显示整个列表。我在做什么错了？

Answer 1

看来，解决方案是将转换的大小增加，即从-100％（或0％）增加到-600％至600％-它使列表的大小是我的盒子的12倍，我认为。如果有人可以通过更改这些数字来确认这是我所做的，我将不胜感激！

列表不会随着变换而移动

1 个答案: