D0r11s (обсуждение | вклад) м (TEST) |
D0r11s (обсуждение | вклад) м (test) |
||
| Строка 21: | Строка 21: | ||
} | } | ||
. | * { | ||
padding: 0; | |||
margin: 0; | |||
} | |||
body { | |||
background: darkolivegreen; | |||
} | |||
.wrapper { | |||
display: flex; | |||
justify-content: center; | |||
margin-top: 30px; | |||
} | |||
.text { | |||
width: 29ch; | |||
color: white; | |||
font-family: monospace; | |||
font-size: 30px; | |||
white-space: nowrap; /* не переносить текст на другую строку */ | |||
overflow: hidden; /* скрываем переполнение контентом */ | |||
border-right: 3px solid white; /* рисуем курсор */ | |||
animation: cursor 0.75s step-end infinite, printed_text 5s steps(29); | |||
} | |||
@keyframes cursor { | |||
0% { | |||
border-color: white; | |||
} | |||
50% { | |||
border-color: transparent; | |||
} | |||
100% { | |||
border-color: white; | |||
} | |||
} | |||
@keyframes printed_text { | |||
from { | |||
width: 0; | |||
} | |||
} | } | ||
Версия от 16:39, 2 августа 2024
@keyframes animationOne {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes text1 {
0% {
color: #000;
margin-bottom: -40px;
}
85% {
letter-spacing: 8px;
margin-bottom: -40px;
}
}
* {
padding: 0;
margin: 0;
}
body {
background: darkolivegreen;
}
.wrapper {
display: flex;
justify-content: center;
margin-top: 30px;
}
.text {
width: 29ch;
color: white;
font-family: monospace;
font-size: 30px;
white-space: nowrap; /* не переносить текст на другую строку */
overflow: hidden; /* скрываем переполнение контентом */
border-right: 3px solid white; /* рисуем курсор */
animation: cursor 0.75s step-end infinite, printed_text 5s steps(29);
}
@keyframes cursor {
0% {
border-color: white;
}
50% {
border-color: transparent;
}
100% {
border-color: white;
}
}
@keyframes printed_text {
from {
width: 0;
}
}