Question

我正在模仿Windows 10的启动屏幕。对于那些熟悉启动程序的人，我将完成颜色转换和一组闪烁的文本（“ Hello！”）。但是我不知道如何添加新的文本集，这些文本集将在（“ Hello！”）文本之后闪烁。我试图对此进行研究，但没有成功

最后一个问题是如何一个接一个地闪烁多组文本

.wrapper {
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  background: linear-gradient(124deg, #0095f0, #e81d1d, #0095f0, #0095f0, #1de840, #ff0000, #f0f0f0, #dd00f3, #009900);
  background-size: 1800% 1800%;
  -webkit-animation: rainbow 18s ease infinite;
  -z-animation: rainbow 25s ease infinite;
  -o-animation: rainbow 25s ease infinite;
  animation: rainbow 25s ease infinite;
}

@-webkit-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}

@-moz-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}

@-o-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}

@keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}

#Message {
  color: #ffffff;
  margin-top: 250px;
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-flicker {
  -webkit-animation: flickerAnimation 10s infinite;
  -moz-animation: flickerAnimation 10s infinite;
  -o-animation: flickerAnimation 10s infinite;
  animation: flickerAnimation 10s infinite;
  color: #ffffff;
  margin-top: 250px;
}

#greet {
  font-family: roboto;
  font-weight: 150;
  font-size: 30px;
}

<div class="wrapper">
  <div class="animate-flicker" align="center">
    <p id="greet">Hello!</h2>
  </div>
</div>

Answer 1

我已按照以下要求翻译了您的问题：

在同一位置连续显示几个单词。
对每个单词应用动画。

我的动画在短时间内显示了10次元素，然后再次将其隐藏。 animation-delay确保第二个单词的动画在第一个动画完成后开始，而第三个单词的动画在第二个动画完成后开始。

为了使单词居中，我将它们定位为绝对。这是必要的，因为我无法在关键帧动画中集成display: inline;或display: none;（属性显示无法设置动画）。

span {
  animation-name: flickerAnimation;
  animation-duration: 0.1s;
  animation-iteration-count: 10;   
  position: absolute;
  opacity: 0;
  left: 0;
  right: 0;
  text-align: center;
}
span:nth-child(2) {
  animation-delay: 1s;
}
span:nth-child(3) {
  animation-delay: 2s;
}

@keyframes flickerAnimation {
  0% {opacity: 1;}
  80% {opacity: 1;}
  81% {opacity: 0;}
  100% {opacity: 0;}
}

<div class="wrapper">
    <span>First</span>
    <span>Second</span>
    <span>Third</span>
</div>

如何一个接一个地闪烁多组文本

1 个答案: