CSS动画自动替换文本

Question

我有 5 个物品，例如猫、狗、大象、河马、狮子。

我需要构建一个 h1 文本，每隔 3 或 4 秒自动更改一次，如下所示

如果我是猫，那么我就不是狗或大象。

如果我是狗，那么我就不是猫或大象。

如果我是大象，那么我就不是猫或狗。

如果我是河马，那么我就不是大象或狮子。

如果我是狮子，那么我就不是大象或河马。

所以无论 I'm 之后是什么，都不能出现在句子的其余部分中。Y 和 Z 可以是列表中的任何内容。

<h1>If I'm X, then I'm not Y, and Z </h1>

这里X、Y和Z像这样动态变化

X、Y 和 Z 同时上升，然后是下一个可能的文本

Answer 1

CSS

CSS 中没有真正的编程，它用于应用样式和视觉效果。
如果您想从列表中随机选择内容，通常会使用 javascript。

您可以通过预先定义要在前面显示的内容来稍微伪造一下。在下面的示例中，我们有一个静态的动物列表。
它将循环显示选项。敏锐的眼睛会发现每次都是同一个列表。

动画

我们有一个带有 css 规则的包装器：overflow:hidden;
我们将高度限制为：height: 50px;

包装内有一个.box项目列表。
每个框都设置为具有height: 50px;
最初，包装器将仅显示第一个框。因为其他的由于overflow:hidden;规则而被隐藏。

然后我们按照规则将框列表向上移动transform: translateY(-__px)。
这会给人一种文本正在向上滚动的印象。由于overflow:hidden;包装纸上的规则，滚动超过顶部的框将会消失。

动画逐步在每个框上停留一段时间，然后继续滚动。

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
}

#app {
  width: 100%;
  height: 100%;
  background: #1a2b45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.text {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
}

.static {
  color: #F9F9F9;
}

.spinner {
  background: #fafafa;
  height: 50px;
  overflow: hidden;
  border-radius: 5px;
  margin: 5px;
  color: #444;
}

.boxes {
  transform: translateY(0);
  transition: transform 1s ease-in-out;
  animation-name: slot-machine;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 15s;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  height: 50px;
  padding: 0 1rem;
}

@keyframes slot-machine {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(-50px);
  }
  20% {
    transform: translateY(-50px);
  }
  25% {
    transform: translateY(-100px);
  }
  40% {
    transform: translateY(-100px);
  }
  45% {
    transform: translateY(-150px);
  }
  60% {
    transform: translateY(-150px);
  }
  65% {
    transform: translateY(-200px);
  }
  80% {
    transform: translateY(-200px);
  }
  85% {
    transform: translateY(-250px);
  }
  95% {
    transform: translateY(-250px);
  }
  97% {
    transform: translateY(10px);
  }
  98% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<div id="app">
  <div class="text">
    <div class="static">if i'm </div>
    <div class="spinner">
      <div class="boxes">
        <div class="box">?</div>
        <div class="box">CAT</div>
        <div class="box">DOG</div>
        <div class="box">ELEPHANT</div>
        <div class="box">HIPPO</div>
        <div class="box">LION</div>
      </div>
    </div>
    <div class="static"> then I'm not </div>
    <div class="spinner">
      <div class="boxes">
        <div class="box">?</div>
        <div class="box">DOG</div>
        <div class="box">ELEPHANT</div>
        <div class="box">HIPPO</div>
        <div class="box">LION</div>
        <div class="box">CAT</div>
      </div>
    </div>
    <div class="static"> or </div>
    <div class="spinner">
      <div class="boxes">
        <div class="box">?</div>
        <div class="box">HIPPO</div>
        <div class="box">LION</div>
        <div class="box">CAT</div>
        <div class="box">DOG</div>
        <div class="box">ELEPHANT</div>

      </div>
    </div>
  </div>
</div>