Блог

Поэтому я недавно получил помощь в создании перехода «затухание» и «затухание» с использованием ключевых кадров, и на своей странице индекса я хочу переключаться между разными заголовками и абзацами, используя этот переход, до сих пор я помещал их в разные разделы (первый раздел .left1 .wright1, затем он перейдет в .wleft2 .wright2, .wleft3 .wright3 и так далее), Но как бы я сделал так, чтобы затухание при выходе не перекрывало друг друга? и было бы лучше поместить их в один и тот же div и просто использовать идентификаторы? Обратите внимание, что я не разместил .wleft2 и .райт2, в данный момент тоже борется с этим.

вот код

 lt;section class="WelcomeMenu"gt; lt;div class="Wleft1"gt;  lt;h1gt; lt;span style="font-weight: 1000;color: #F10000; font-size: 64px;"gt; STOP! lt;/spangt;   lt;span style="font-weight: 600;" id="think"gt;THINK lt;/spangt;  lt;span style=" font-weight: 600;" id="check"gt; amp; CHECKlt;/spangt;  lt;/h1gt;  lt;pgt;  Have you ever wondered how factual the news you just lt;brgt; scrolled past on TikTok are?   Do you wanna learn how to lt;brgt; fact check the information your favorite artists are spreading?  lt;/pgt;  lt;h2gt;  Check out this page to learn more!   lt;h2gt; lt;/divgt; lt;div class="Wright1"gt;  lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJSw3WeFfVdDF344Oz_fzwvPDhWrYZfaRTk0a1ZyThTCR79InWzGVnZEmasx0O10Cku9wamp;usqp=CAU" alt="dababy"gt;   lt;button class="btn1"gt; lt;a href=""gt; lt;bgt;HOW TO SPOT FAKE NEWSlt;/bgt; lt;/agt; lt;/buttongt; lt;/divgt; lt;div class="Wleft2"gt;  lt;h1gt; Fake news, are they that dangerous?lt;/h1gt; lt;/divgt; lt;div class="Wright2"gt;  lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJSw3WeFfVdDF344Oz_fzwvPDhWrYZfaRTk0a1ZyThTCR79InWzGVnZEmasx0O10Cku9wamp;usqp=CAU" alt="dababy"gt;   lt;button class="btn1"gt; lt;a href=""gt; lt;bgt;THE DANGER OF FAKE NEWS lt;/bgt; lt;/agt; lt;/buttongt; lt;/divgt;  

 * { margin: 0; font-family: 'Noto Sans', sans-serif;}  

 .WelcomeMenu {  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),  url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtu9n9VxqReVvZ0mmwOUjQuaiP2MrY5XlP-sKfvjUuEKlr4544-P571JttE2vLtsD177Aamp;usqp=CAU ");  background-repeat: no-repeat;  background-size: cover;  width: 100%;  height: 100vh; } .WelcomeMenu h1 {  font-size: 45px;  background-color: transparent;  color: #ffff;  padding: 0;  padding-top: 35%;  padding-left: 10%; } #check:after {  content: "2713"; } #think:after {  content: "1F4A1"; } .WelcomeMenu h2 {  font-size: 23px;  background-color: transparent;  padding-left: 10%;  padding-top: 0.8%;  color: #fff; } .WelcomeMenu p {  color: #ffff;  font-size: 20px;  margin-top: 1%;  padding-left: 10%; }  .Wleft1 {  float: left;  width: 50%;  -webkit-animation: fadeinout 14s linear forwards;  animation: fadeinout 14s linear forwards;  opacity: 0; } @-webkit-keyframes fadeinout {  0% {  opacity: 0;  }   10% {  opacity: 1;  }   90% {  opacity: 1;  }   100% {  opacity: 0;  } } @keyframes fadeinout {  0% {  opacity: 0;  }   10% {  opacity: 1;  }   90% {  opacity: 1;  }   100% {  opacity: 0;  } }  .Wright1 {  float: left;  width: 50%;  -webkit-animation: fadeinout 14s linear forwards;  animation: fadeinout 14s linear forwards;  opacity: 0; }  @-webkit-keyframes fadeinout {  0% {  opacity: 0;  }   10% {  opacity: 1;  }   90% {  opacity: 1;  }   100% {  opacity: 0;  } } @keyframes fadeinout {  0% {  opacity: 0;  }   10% {  opacity: 1;  }   90% {  opacity: 1;  }   100% {  opacity: 0;  } }  .Wright1 img {  width: 750px;  padding-top: 25%; }  .Wleft2 {  float: left;  width: 50%; } .Wleft2 h1 {  display: flex;  font-size: 45px;  background-color: transparent;  color: #ffff;  padding: 0;  margin-bottom: 10%; }  .Wright2 {  float: left;  width: 50%; } .Wright2 img {  width: 750px;  padding-top: 0%; }  .btn1 {  background-color: #d80000;  border: none;  color: black;  padding: 15px 30px;  text-align: center;  margin-left: 10%;  border-radius: 25px;  transition: 0.3s;  display: inline-block; } .btn1 a {  text-decoration: none;  color: white;  font-size: 40px; } .btn1 a:hover {  color: black;  transition: 1.5s; }