仅使用 CSS 顺序显示 HTML 部分答案

【问题标题】：Displaying HTML Sections Sequentially with CSS Only仅使用 CSS 顺序显示 HTML 部分
【发布时间】：2019-10-06 04:53:46
【问题描述】：

请参阅下面的 HTML 代码。哪些 CSS 代码将完成以下任务：

加载时，第一部分会显示一段指定的时间然后消失。然后第二节显示一段指定的时间并消失；然后是第三节，然后是第四节，方式与前几节相同。整个事情重复了。

section {margin: 50px 40%;}

<section id="one">
  <div class="content">Some stuff</div>
</section>
<section id="two">
  <div class="content">Some other stuff</div>
</section>
<section id="three">
  <div class="content">More of the same</div>
</section>
<section id="four">
  <div class="content">Ditto</div>
</section>

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

看看CSS animations。您可以使用关键帧来隐藏和显示您的部分，如下所示：

@keyframes show{
  0% {opacity: 0}
  10% {opacity: 1}
  25% {opacity: 0}
}

然后，您可以使用animation-delay 来延迟每个部分的开始：

#one{
  opacity: 0;
  animation: show 40s infinite;
}
#two{
  opacity: 0;
  animation: show 40s infinite;
  animation-delay: 10s;
}
#three{
  opacity: 0;
  animation: show 40s infinite;
  animation-delay: 20s;
}
#four{
  opacity: 0;
  animation: show 40s infinite;
  animation-delay: 30s;
}

稍加调整和数学运算，您就可以得到想要的结果！

我的代码的 sn-p：

@keyframes show{
  0% {opacity: 0}
  10% {opacity: 1}
  25% {opacity: 0}
}

#one{
  opacity: 0;
  animation: show 40s infinite;
}
#two{
  opacity: 0;
  animation: show 40s infinite;
  animation-delay: 10s;
}
#three{
  opacity: 0;
  animation: show 40s infinite;
  animation-delay: 20s;
}
#four{
  opacity: 0;
  animation: show 40s infinite;
  animation-delay: 30s;
}

<body>
  <style>
    section {
      margin: 50px 40%;
    }
  </style>
  <section id="one">
    <div class="content">Some stuff</div>
  </section>
  <section id="two">
    <div class="content">Some other stuff</div>
  </section>
  <section id="three">
    <div class="content">More of the same</div>
  </section>
  <section id="four">
    <div class="content">Ditto</div>
  </section>
</body>

【讨论】：

谢谢。这行得通。我尝试使用动画，但无法获得正确的时机。