javascript - 自动/电影滚动文本框效果 CSS/JS

Question

我想创建一个悬停时自动滚动的文本框的简单变体，如 here 所示。 。当您将鼠标悬停在某个框上时，文本会滚动。当您将鼠标移开时，文本会重置到开头。这就是我所追求的。

似乎有一个类似的问题:Auto scroll text effect 。然而，示例链接不起作用(至少对我来说)，我不能明确地说它是否与我所追求的相同。该问题还假设有 jquery 环境。我正在使用原生 JS。

我不确定是否需要 JS，html/css 解决方案也受欢迎。让我知道我可以为这项任务承担什么。

Answer 1

您可以为文本框或 div 指定一个类，例如:

  .mydiv:hover {  
    animation: scrolling 12s .2s linear 1;
  }


  @keyframes scrolling {
    from { top: 0; transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -100%, 0); }
  }

您可能需要给它一些overflow: auto;和overflow-x:hidden;