CSS 唯一让单词在句子中自然出现的解决方案

Question

所以我有一个 html.slim 句子，如下所示：

 p 
  | Log in to 
  span.word-shapeshift.text-center
    span.word Explore
    span.word Engage
    span.word Conquer
    span.word Defeat 
  | the members of the outer realm

我正在努力让这些单词自然地出现在句子中，如下所示：

“登录征服外域成员”。但是，我的 CSS 代码使得该单词出现在句子后面。 CSS 代码如下：

$speed: 12s;
$wordCount: 4;

.word-shapeshift {
  color: #ecf0f1;  
  white-space: nowrap;
  position: relative;
  color: #fff;
  filter: contrast(25) blur(1px);

  .word {
    position: absolute;
    display: inline-block;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: rotateWord $speed infinite ease-in-out;
  
    @for $i from 0 to $wordCount {
      &:nth-child(#{$i + 1}) {
        animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
      }
    }
  
    @keyframes rotateWord {
      0%, 5%, 100% { filter: blur(0px); opacity: 1; }        
      20%, 80% { filter: blur(1em); opacity: 0; }        
    }
  }
  
  
}

我在这里做错了什么？

Answer 1

此代码片段已将给定代码“翻译”为纯 CSS/HTML，因为我发现更容易看到发生了什么。

为了给句子中的单词保留足够的空间，最长的单词（就所需的空间而言）放在序列的末尾。其他旋转词保持位置：绝对，但这第四个旋转词具有相对位置，因此保留空间。

注意：在这个简单的示例中，颜色设置为 #fff 使其消失，因此颜色设置已被删除。由于颜色/滤镜/模糊不是问题中问题的一部分，因此我没有进一步更改它们。时间安排也是如此，尽管当没有任何文字显示时，给出的时间安排会产生一个小间隙。这当然可以通过查看动画/关键帧设置来更改。

.word-shapeshift {
  /*color: #ecf0f1;*/
  white-space: nowrap;
  position: relative;
  /*color: #fff;*/
  filter: contrast(25) blur(1px);
  --speed: 12s;
  --wordCount: 4;
  width: fit-content;
  display: inline-block;
  .word {
    display: inline-block;
    position: absolute;
    animation: rotateWord var(--speed) infinite ease-in-out;
    animation-delay: calc(var(--speed) / (var(--wordCount) + 1) * var(--n) - var(--speed));
    left: 50%;
    transform: translateX(-50%);
    &:nth-child(1) {
      --n: 1;
    }
    &:nth-child(2) {
      --n: 2;
    }
    &:nth-child(3) {
      --n: 3;
    }
    &:nth-child(4) {
      --n: 4;
      position: relative;
    }
  }
}

@keyframes rotateWord {
  0%,
  5%,
  100% {
    filter: blur(0px);
    opacity: 1;
  }
  20%,
  80% {
    filter: blur(1em);
    opacity: 0;
  }
}

<div>Log in to <span class="word-shapeshift">
    <span class="word">Explore</span>
  <span class="word">Engage</span>
  <span class="word">Defeat</span>
  <span class="word">Conquer</span></span> the members of the outer realm</div>