时间戳

首页 > 解决方案 > 显示从 x 时间到 x 时间的文本（它将在下一个文本中继续），如演示文稿

javascript - 显示从 x 时间到 x 时间的文本（它将在下一个文本中继续），如演示文稿

问题描述

我试图显示类似演示文稿的文本。我试过这段代码

setTimeout(fade_out, 2000);

function fade_out() {
$("#msg").fadeOut().empty();
}

和

<div id="msg"> John (First appear)</div>
<div id="msg"> Doe (Second appear)</div>

但它只是显示，然后隐藏了这个词

如何使文本连续出现和消失（例如在x时间出现和在y时间消失的功能），因为我对Javascript知之甚少。

例子：

首次展示

二次显示

标签： javascriptjqueryhtml

解决方案

您也可以单独使用 CSS 来实现此效果。

这是一种完全合法的方法，因为 CSS 负责 Web 文档中的表示层。

工作示例：

body {
  font-family: arial, helvetica, sans-serif;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70%;
  font-size: 6vw;
  opacity: 0;
}

.slide-1 {
  animation: showSlide 3s linear 0s;
}

.slide-2 {
  animation: showSlide 3s linear 3s;
}

.slide-3 {
  animation: showSlide 3s linear 6s;
}

.slide-4 {
  animation: showSlide 3s linear 9s;
}

.slide-5 {
  animation: showSlide 3s linear 12s;
}

@keyframes showSlide {

    0% {opacity: 0;}
   20% {opacity: 1;}
   80% {opacity: 1;}
  100% {opacity: 0;}
}
<p class="slide slide-1">Hi!</p>
<p class="slide slide-2">We're setting things up for you</p>
<p class="slide slide-3">Getting there...</p>
<p class="slide slide-4">Just a little bit more...</p>
<p class="slide slide-5">Thanks for your patience.</p>

推荐阅读