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

这是方框中的效果，在滚动列表中一遍又一遍地重复“ session ”这样的词。查看他们的源代码，似乎他们在一系列相同的 div 中重复同一个词，然后使用 transform: translate 在无限循环中为它们设置动画。那部分很简单，但是很难让顶行从框的“外部”进入框，就像底部文本退出框一样，如果这有意义的话。顶行突然出现。

我用一个覆盖框解决了这个问题，该框具有带负偏移的轮廓，就像围绕边缘的内部 mask ，然后是另一个框来提供边框。

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

任何帮助或想法都会很棒，谢谢!

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>