文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在css中显示第一个文本之后再显示另一个文本？

问如何在css中显示第一个文本之后再显示另一个文本？
EN

Stack Overflow用户

提问于 2021-09-05 10:33:10

回答 2查看 71关注 0票数 0

我正在做一个心理健康网站。为了使它具有交互性，我使用了一个显示的动画文本。我想知道如何添加另一行文本来传递。

如下所示：

紫色文本出现在黑色文本之前。我想加上一句“我们选择了心理健康，因为这很重要”

我该怎么做？

/* The animation text*/

.intro {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.intro1 {
  animation: showup 7s infinite;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  color: fuchsia;
}

.intro2 {
  width: 0px;
  animation: reveal 7s infinite;
}

.sub-head {
  margin-left: -355px;
  animation: slidein 7s infinite;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 355px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 355px;
  }
}

<div class="first-box">

  <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head"> We care about you</span>
    <!-- lol dramatic effect-->
  </div>
</div>

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-09-05 11:25:13

其中一种方法是：

// set the interval for which the function will run (in our case 7 secons - 7000 )
setInterval(function() {
  // grab all elements with class 'sub-head'
  const elems = document.querySelectorAll('.sub-head')
  // loop through the found elements 
  elems.forEach(e => {
     // check if the element has a class 'inactive', if there is one, remove it
    if (e.classList.contains('inactive')) e.classList.remove('inactive')
    // if not, add it
    else e.classList.add('inactive');
  });
}, 7000)

/* The animation text*/

.intro {
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
}

.intro1 {
  animation: showup 7s ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  color: fuchsia;
}

.intro2 {
  width: 0px;
  animation: reveal 7s infinite;
}

.inactive {
  display: none;
}

.sub-head {
  margin-left: -355px;
  animation: slidein 7s infinite;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: .4;
  }
  80% {
    opacity: .8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 655px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 655px;
  }
}

<div class="first-box">

  <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head "> We care about you</span>
    <span class="sub-head inactive"> We chose mental health because it matters</span>
    <!-- lol dramatic effect-->
  </div>
</div>

票数 1

Stack Overflow用户

发布于 2021-09-05 10:49:01

你的意思是这样的-

我测试动画是否已经完成。这比setTimeout或interval安全得多，因为动画已经有了间隔。

const elems = [...document.querySelectorAll('.intro2 .sub-head')]
const welcome = document.querySelector('.intro1')
welcome.addEventListener("animationend", function() {
  welcome.classList.add('hide')
  elems[0].classList.add("hide")
  elems[1].classList.remove("hide")
});

/* The animation text*/

.intro {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.intro1 {
  animation: showup 7s;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  color: fuchsia;
}

.intro2 {
  width: 0px;
  animation: reveal 7s infinite;
}

.sub-head {
  margin-left: -355px;
  animation: slidein 7s infinite;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 355px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 355px;
  }
}

.hide {
  display: none;
}

<div class="first-box">

  <div class="intro intro1">Welcome!</div>
  <div class="intro intro2">
    <span class="sub-head"> We care about you</span>
    <span class="sub-head hide">We chose mental health because it matters</span>
    <!-- lol dramatic effect-->
  </div>
</div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69062562

复制

相似问题

问如何在css中显示第一个文本之后再显示另一个文本？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中显示第一个文本之后再显示另一个文本？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在css中显示第一个文本之后再显示另一个文本？
EN