rmcg.dev/projects/random/animated-typing/style.css

45 lines
713 B
CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
display: grid;
align-items: center;
padding: 4rem;
min-height: 100vh;
background: linear-gradient(#eff0f3, #efe0ef);
}
.container {
display: grid;
justify-items: start;
gap: 2rem;
}
[data-typewriter] {
font-family: system-UI;
font-weight: bold;
font-size: 4.5rem;
color: #d9376e;
height: 6rem;
border-right: 0.8rem solid transparent;
padding: 0.6rem;
}
[data-typewriter]:not(.typing) {
animation: blink-cursor 1.1s step-end infinite;
}
@keyframes blink-cursor {
0%,
100% {
border-color: transparent;
}
50% {
border-color: #ff8e3c;
}
}