Отображение секций HTML последовательно только с помощью CSS - PullRequest
Новая
       7

Отображение секций HTML последовательно только с помощью CSS

0 голосов
/ 05 октября 2019

См. 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>

1 Ответ

3 голосов
/ 05 октября 2019

Взгляните на CSS-анимацию . Вы можете использовать ключевые кадры, чтобы скрывать и показывать свои разделы примерно так: 

@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;
}

Снемного настроек и математики, вы можете получить желаемый результат!

Фрагмент моего кода: 

@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>
...