Question

我正在模仿Windows 10的启动屏幕。到目前为止，我在中间的“ Hello！”中有颜色过渡和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>

如何随着时间的推移闪烁多组文本

0 个答案: