#html #css
#HTML #CSS
Вопрос:
Я работаю над домашней страницей для школьного проекта, и я хочу, чтобы переходы между несколькими абзацами и заголовками исчезали и исчезали, но дело в том, что мне нужно, чтобы она оставалась на странице в течение нескольких секунд, а не просто исчезала и исчезала, чтобы пользователь мог ее прочитать,
вот код, который я пытаюсь, но, похоже, он работает неправильно:
* { margin: 0; } .WelcomeMenu { background-image: linear-gradient(rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.8)), url('https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg '); 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: 16%; padding-left: 7%; } .WelcomeMenu h1:after { content: '2713'; } #think:after { content: '1F4A1'; } .WelcomeMenu h2 { font-size: 23px; background-color: transparent; padding-left: 7%; padding-top: 0.8%; color: #fff; } .WelcomeMenu p { color: #ffff; font-size: 20px; margin-top: 1%; padding-left: 7% } .Fade1 { -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; opacity: 0; } @-webkit-keyframes fadeinout { 50% { opacity: 1; } } @keyframes fadeinout { 50% { opacity: 1; } } lt;section class="WelcomeMenu"gt; lt;div class="Fade1"gt; lt;h1gt; lt;span style="font-weight: 1000;color: #F10000; font-size: 64px;"gt;STOPlt;/spangt; lt;span style="font-weight: 600;" id="think"gt;THINK lt;/spangt; lt;span style=" font-weight: 600;"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;/sectiongt; Ответ №1:
Вы можете расширить временную шкалу и добавить больше ключевых кадров, чтобы она исчезла, посидела около 10 секунд, а затем исчезла. См. фрагмент.
* { margin: 0; } .WelcomeMenu { background-image: linear-gradient(rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.8)), url('https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg '); 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: 16%; padding-left: 7%; } .WelcomeMenu h1:after { content: '2713'; } #think:after { content: '1F4A1'; } .WelcomeMenu h2 { font-size: 23px; background-color: transparent; padding-left: 7%; padding-top: 0.8%; color: #fff; } .WelcomeMenu p { color: #ffff; font-size: 20px; margin-top: 1%; padding-left: 7% } .Fade1 { -webkit-animation: fadeinout 12s linear forwards; animation: fadeinout 12s 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; } } lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;meta charset='utf-8'gt; lt;meta http-equiv='X-UA-Compatible' content='IE=edge'gt; lt;titlegt; uydvujdhbvlt;/titlegt; lt;meta name='viewport' content='width=device-width, initial-scale=1'gt; lt;script src='main.js'gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;section class="WelcomeMenu"gt; lt;div class="Fade1"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;"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;/sectiongt; lt;/bodygt; lt;/htmlgt;