时间戳

首页 > 解决方案 > CSS - 有没有更好的方法来创建从框的边缘出现和消失的滚动重复文本？

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

问题描述

.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 在无限循环中对它们进行动画处理。那部分很简单，但是如果有意义的话，让顶行从框“外部”进入框更难，就像底部文本退出框一样。顶线突然出现。

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

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

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

标签： csslayoutcss-animations

解决方案

你的问题是这两行：

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>

推荐阅读