CSS -有没有更好的方法来创建滚动重复的文本，这些文本从框的边缘出现和消失？

Question

​

.container {
      font-family: sans-serif;
      font-size: 30px;
      position: relative;
    /*   border: 1px solid #000; */
      width: 90%;
      margin: 0 auto;
      overflow: hidden;
      text-align: center;
      margin-top: 10px;
    }
    
    .individual {
      animation: scroll 500ms linear infinite;
      }
    
    @keyframes scroll {
      100% {
        transform: translateY(100%);
      }
    }
    
    .overlay-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: none;
      outline: 20px solid #fff;
      outline-offset: -20px;
    }
    
    .overlay-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      background-color: none;
      z-index: 2;
      outline: 2px solid #000;
      outline-offset: -20px;
    }

<div class="container">
 
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>

<div class="overlay-1"></div>
<div class="overlay-2"></div>
  
</div>

​

我正在试图弄清楚如何重新创建在这个网站上使用的效果：https://inthecity.strelka.com/en

这是在滚动列表中反复出现“会议”这样的单词的框中的效果。查看它们的源代码，似乎它们在一系列相同的div中重复相同的单词，然后使用transform: translate在无限循环中对它们进行动画处理。这一部分很简单，但要让顶行从“框外”进入框就更难了，就像底部文本退出框一样，如果这有意义的话。第一行是突然出现的。

我用一个覆盖框解决了这个问题，它的轮廓有一个负的偏移量，就像一个围绕边缘的内部遮罩，然后另一个框提供一个边框。

但我想知道是否有更简单的方法来解决这个问题？

任何帮助或想法都是很棒的，谢谢！

Answer 1

你的问题是这两行：

outline: 20px solid #fff;
outline-offset: -20px;

我已经用正确的代码实现了下面的代码片段。

​

.container {
      font-family: sans-serif;
      font-size: 30px;
      position: relative;
    /*   border: 1px solid #000; */
      width: 90%;
      overflow: hidden;
      text-align: center;
      margin-top: 10px;
    }
    
    .individual {
      animation: scroll 1000ms linear infinite;
      }
    
    @keyframes scroll {
      100% {
        transform: translateY(100%);
      }
    }
    
    .overlay-1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: none;
      outline: 50px solid #fff;
      outline-offset: -30px;
    }
    
    .overlay-2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 1;
      background-color: none;
      
      outline: 2px solid #000;
      outline-offset: -20px;
    }

<div class="container">
 
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>
<div class="individual">
  <div class"words">HELLO TO YOU</div>
</div>

<div class="overlay-1"></div>
<div class="overlay-2"></div>
  
</div>

​