css - 如何使文本阴影位于真实文本旁边，使其看起来像CSS中的重复文本？

Question

我正在创建字幕。这些是步骤: 为此，我必须在原始文本旁边创建一个 text-shadow 。问题是文本宽度不是恒定的，所以我可以这样做:

...{
  text-shadow: 619px 0 0 black;
}

这是我的代码:

.marquee {
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  text-shadow: 619px 0 0 black;
}

.marquee>* {
  width: 100%;
  display: inline-block;
  transform: translateX(0%);
  animation: marquee 5s linear infinite;
  will-change: transform;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

<div class="marquee">
  <h1>lorem ipsum dolor ist as ment lorem ipsum</h1>
</div>

注意:我知道我可以在 JavaScript 中获取文本的宽度并根据它设置阴影。

Answer 1

您可以使用 html data attribute 来实现此目的和CSS after pseudo-element

只需将 h1 标记内的文本复制到 data-text 属性即可。

.marquee {
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.marquee > h1 {
  width: 100%;
  display: inline-block;
  transform: translateX(0%);
  animation: marquee 5s linear infinite;
  will-change: transform;
}

h1::after {
  /* this is where you will use the data-attribute */
  content: attr(data-text);
  display: inline;
  margin-left: 50px;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

<div class="marquee">
  <h1 data-text="lorem ipsum dolor ist as ment lorem ipsum">lorem ipsum dolor ist as ment lorem ipsum</h1>
</div>