如何在真实文本旁边制作文本阴影，使其看起来像 css 中的重复文本

发布于11月30日

I'm creating marquee. These are the steps: To do that I have to make a text-shadow next to the original text. The problem is the text width is not constant so I can do something like:

...{
  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中设置阴影.

推荐答案

您可以使用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>

Css相关问答推荐

实现前景渐变到背景的平滑混合

CSS媒体查询不显示所需的输出

如何使用Bootstrap将图像水平对齐，使其顶部和底部位于同一水平线上？

如何使用 Ant Design 为不同的屏幕尺寸制作自定义组件样式

如何使用 tailwind css 修复滚动条始终位于底部？

Nextjs Tailwind Marquee 组件溢出

当您到达页面底部时，如何使页脚 div 将附加的 div 向上推

如何使用props 为 Vue 中的组件创建动态背景图像？

如果中间元素的内容不适合 CSS，如何将其分隔到新行？

问题定位位置：Tailwindcss 中的绝对元素

如何在 CSS 中更改：：marker SVG colored颜色？

CSS 常量()用于什么？

如何制作一个居中的标题样式，其中换行符将最长的行排列在底部

将复选框对齐到中心

Twitter Bootstrap：进度条居中文本

使用 CSS 剪辑/裁剪背景图像

为什么 .class：last-of-type 不能按我的预期工作？

使用 CSS/HTML 更改悬停图像

Highcharts 图表选项 backgroundColor：'transparent' 在 IE 8 上显示黑色

将 Fixed div 设置为父容器的 100% 宽度

实用课程推荐