Question

我正在尝试创建自动滚动列表，列表的确切副本位于this网站的右侧，您需要向下滚动一点，我找到了答案here但我观察到滚动不流畅。

任何使用纯CSS的帮助，将不胜感激。

我的html在下面：

<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-header">List of Donors</div>
      <ul class="list-group donors">
        <li class="list-group-item" *ngFor="let flag of (flags | async)">
          <p>{{ flag.name }} {{flag.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</div>

Css代码：

.list-group-item {
    border-bottom: 1px solid #666;
}

.donors {
    -webkit-transition: opacity 0.5s ease-out;
    -webkit-animation: autoScrolling 5s linear infinite;
    height: 20em;
}

@-webkit-keyframes autoScrolling {
    from {
        margin-top: 0;
    }
    to {
        margin-top: -20em;
    }
}

N：B我是CSS初学者，一个工作的CSS技巧将不胜感激。

Answer 1

如果您要查看所引用网站上的代码，则会发现它们使用Obsolete <marquee>标签。因此，如果您不想使用这种不推荐的方法来实现自己的目标，则可以考虑使用Javascript解决方案，例如：

Javascript Marquee to replace <marquee> tags

当然，对于example @keyframes动画，您仍然可以使用CSS hacks来做到这一点，但是我认为这是一个不好的代码，我不确定它是否比使用过时的HTML标签。

垂直垂直滚动列表组

1 个答案: