Я имитирую экран запуска 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>Я имитирую экран запуска 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>