CSS动画以自动替换文本

Question

我有五样东西，像这只猫，狗，大象，河马，狮子。

我需要构建一个h1文本，它每3或4秒就会自动改变一次，就像这样

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

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

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

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

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

所以不管我之后发生了什么，都不能在剩下的句子里出现。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>

​