Как Flicker Множество наборов текста с течением времени

Я имитирую экран запуска Windows 10. Пока у меня есть цветовые переходы и 1 набор текста, мерцающий в центре «Привет!». Однако я понятия не имею, как добавить новый текст в мерцание после Hello

Если вы знакомы с начальным экраном Windows 10, тогда должно быть очевидно, что я пытаюсь воссоздать

Вопрос в том, как я могу пометить новый набор текста после предыдущего со временем

    <html>
    <head>
    <title>Windows 10 Simulator</title>
    </head>
    <body>
    <style>.wrapper { 
      height: 100%;
      width: 100%;
      left:0;
      right: 0;
      top: 0;
      bottom: 0;
      position: absolute;
    background: linear-gradient(124deg, #0095f0, #e81d1d, #0095f0, #0095f0, #1de840, #ff0000, #f0f0f0, #dd00f3, #009900);
    background-size: 1800% 1800%;

    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 25s ease infinite;
    -o-animation: rainbow 25s ease infinite;
      animation: rainbow 25s ease infinite;}

    @-webkit-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @-moz-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @-o-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @keyframes rainbow { 
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }


    #Message {
              color:#ffffff;
              margin-top:250px;
              }


      @keyframes flickerAnimation {
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
      }
      @-o-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
      }
      @-moz-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
      }
      @-webkit-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
      }
      .animate-flicker {
      -webkit-animation: flickerAnimation 10s infinite;
      -moz-animation: flickerAnimation 10s infinite;
      -o-animation: flickerAnimation 10s infinite;
      animation: flickerAnimation 10s infinite;
      color:#ffffff;
      margin-top:250px;
      }

      #greet {

              font-family: roboto;
              font-weight: 150;
              font-size: 30px;
      }
    </style>
    <div class="wrapper">
    <div class="animate-flicker" align="center" ><p id="greet">Hello!</h2></div>
    </div>
    </body>
    </html>

html,css,

0

Ответов: 0

Как Flicker Множество наборов текста с течением времени

Я имитирую экран запуска Windows 10. Пока у меня есть цветовые переходы и 1 набор текста, мерцающий в центре «Привет!». Однако я понятия не имею, как добавить новый текст в мерцание после Hello

Если вы знакомы с начальным экраном Windows 10, тогда должно быть очевидно, что я пытаюсь воссоздать

Вопрос в том, как я могу пометить новый набор текста после предыдущего со временем

    <html>
    <head>
    <title>Windows 10 Simulator</title>
    </head>
    <body>
    <style>.wrapper { 
      height: 100%;
      width: 100%;
      left:0;
      right: 0;
      top: 0;
      bottom: 0;
      position: absolute;
    background: linear-gradient(124deg, #0095f0, #e81d1d, #0095f0, #0095f0, #1de840, #ff0000, #f0f0f0, #dd00f3, #009900);
    background-size: 1800% 1800%;

    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 25s ease infinite;
    -o-animation: rainbow 25s ease infinite;
      animation: rainbow 25s ease infinite;}

    @-webkit-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @-moz-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @-o-keyframes rainbow {
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }
    @keyframes rainbow { 
        0%{background-position:0% 82%}
        50%{background-position:100% 19%}
        100%{background-position:0% 82%}
    }


    #Message {
              color:#ffffff;
              margin-top:250px;
              }


      @keyframes flickerAnimation {
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
      }
      @-o-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
      }
      @-moz-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
      }
      @-webkit-keyframes flickerAnimation{
      0%   { opacity:1; }
      50%  { opacity:0; }
      100% { opacity:1; }
      }
      .animate-flicker {
      -webkit-animation: flickerAnimation 10s infinite;
      -moz-animation: flickerAnimation 10s infinite;
      -o-animation: flickerAnimation 10s infinite;
      animation: flickerAnimation 10s infinite;
      color:#ffffff;
      margin-top:250px;
      }

      #greet {

              font-family: roboto;
              font-weight: 150;
              font-size: 30px;
      }
    </style>
    <div class="wrapper">
    <div class="animate-flicker" align="center" ><p id="greet">Hello!</h2></div>
    </div>
    </body>
    </html>
00HTML, CSS,
Похожие вопросы