69 lines
1.4 KiB
CSS
69 lines
1.4 KiB
CSS
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
background: #000000;
|
|
color: #b30000;
|
|
font-family: "Lucida Console", monospace;
|
|
}
|
|
.container {
|
|
margin-top: 5%;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 70px;
|
|
}
|
|
.first_line,
|
|
.second_line {
|
|
white-space: nowrap; /* keep text in one line */
|
|
overflow: hidden; /* hide text behind the cursor */
|
|
margin: 0.5rem auto;
|
|
font-family: "Lucida Console", monospace;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
.first_line {
|
|
border-right: 2px solid rgba(17, 17, 17, 0.9);
|
|
/* define animation types for text + cursor */
|
|
animation: typewriter_1 3s steps(25) 1s 1 normal both,
|
|
first_cursor 900ms steps(33) 8;
|
|
}
|
|
.second_line {
|
|
border-right: 2px solid rgba(17, 17, 17, 0.9);
|
|
/* define animation types for text + cursor */
|
|
animation: typewriter_2 5s steps(31) 1s 1 normal both,
|
|
second_cursor 900ms steps(31) infinite;
|
|
-webkit-animation-delay: 7s;
|
|
animation-delay: 7s;
|
|
}
|
|
@keyframes typewriter_1 {
|
|
from {
|
|
width: 0;
|
|
}
|
|
to {
|
|
width: 34rem;
|
|
}
|
|
}
|
|
@keyframes typewriter_2 {
|
|
from {
|
|
width: 0;
|
|
}
|
|
to {
|
|
width: 40rem;
|
|
}
|
|
}
|
|
@keyframes first_cursor {
|
|
from {
|
|
border-right-color: rgba(17, 17, 17, 0.9);
|
|
}
|
|
to {
|
|
border-right-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|
|
@keyframes second_cursor{
|
|
from {
|
|
border-right-color: rgba(17, 17, 17, 0.9);
|
|
}
|
|
to {
|
|
border-right-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
}
|