如何在我的 CSS 字滚动动画之后放置一段文本？

Question

我想制作一个旋转的文本动画，上面写着“THE ___ABILITY LAB”，同时旋转“adaptABILITY、affordABILITY、employABILITY”等词

我遵循了一个教程，该教程允许我创建滚动文本动画，但仅限于句子的末尾，允许我创建像“THE adapt”这样的文本，但我在制作“ABILITY LAB”时遇到了麻烦部分出现在之后。鉴于“adapt, afford, employ”这几个词有不同数量的字符，我希望它们出现在剩余的“ability lab”之间的恒定距离处，当然不会与任何文本重叠。

下面是我的 HTML 和 CSS 代码。谢谢！

body
{
  margin: 0;
  padding: 0;
  background: #fff;
}
.box
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3em;
  font-family: sans-serif;
  color: #black;
  margin-left: 50px;
  width: calc(100% - 50px);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.word
{
  display: inline-block;
  color: grey;
}
.word span
{
  position: absolute;
  top: 0;
  overflow: hidden;
  animation: animate 10s linear infinite;
  opacity: 0;
}

@keyframes animate
{
  0%
  {
    opacity: 0;
    transform: translateY(-50px);
  }
  2%
  {
    opacity: 1;
    transform: translateY(0px);
  }
  18%
  {
    opacity: 1;
    transform: translateY(0px);
  }
  20%
  {
    opacity: 0;
    transform: translateY(0px);
  }
  100%
  {
    opacity: 0;
    transform: translateY(0px);
  }
}
.word span:nth-child(1)
{
  animation-delay: 0s;
}
.word span:nth-child(2)
{
  animation-delay: 2s;
}
.word span:nth-child(3)
{
  animation-delay: 4s;
}
.word span:nth-child(4)
{
  animation-delay: 6s;
}
.word span:nth-child(5)
{
  animation-delay: 8s;
}

<!docctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rotating Word</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box">
      THE
      <div class="word">
        <span>adapt </span>
        <span>explor</span>
        <span>employ</span>
      </div>
      ABILITY LAB
    </div>
  </body>
</html>

Answer 1

如果您希望“THE”和“ABILITY LAB”之间的距离始终保持不变，只需给您的.worddiv一个width.

示例：https://jsfiddle.net/js50aLph/.

右对齐文本

要右对齐变量文本（即“adapt”、“afford”、“employ”），使其与“AFFORD”之间没有 space，您可以试试这个：

首先，制作 .word position: relative 以便我们可以相对于它定位文本。

.word {
  position: relative;
  /* ... */
}

其次，将 <span> 元素放置在右侧和底部：

.word span {
  right: 0;
  bottom: 0; /* After adding this, you should remove top: 0 */
  /* ... */
}

需要bottom: 0因为.word没有身高。因此，定位，<span>相对于word的top会导致偏移。

最后，使用此解决方案，您现在可能会注意到文本未正确垂直对齐。要解决这个问题，只需调整 <span> 元素的 bottom 属性即可。例如：

.word span {
  /* ... */
  bottom: -12px;
}

更新示例：https://jsfiddle.net/js50aLph/1/。

更新的示例（具有正确的垂直偏移）：https://jsfiddle.net/j2x7bkag/。

如何在我的 CSS 字滚动动画之后放置一段文本？

How do I position a block of text after my CSS word-scrolling animation?

html

css

animation

spacing

右对齐文本