31 lines
1.1 KiB
CSS
31 lines
1.1 KiB
CSS
:root {
|
|
--text-color: solid orange;
|
|
}
|
|
|
|
/* =========================================================== *
|
|
* Type Writer Effect *
|
|
* Ref: https://css-tricks.com/snippets/css/typewriter-effect/ *
|
|
/* =========================================================== */
|
|
|
|
.typewriter {
|
|
overflow: hidden; /* Crop everything that hasn't been "typed" yet */
|
|
border-right: .15em solid orange; /* Cursor */
|
|
white-space: nowrap; /* Keeps the content on a single line */
|
|
margin: 0 auto; /* Scrolling effect while "typing" */
|
|
letter-spacing: .15em; /* Adjustable */
|
|
animation:
|
|
typewriter-typing 3.5s steps(40, end),
|
|
typewriter-cursor-blink .75s step-end infinite;
|
|
}
|
|
|
|
/* .typewriter typing effect */
|
|
@keyframes typerwriter-typing {
|
|
from { width: 0 }
|
|
to { width: 100% }
|
|
}
|
|
|
|
/* .typewriter cursor blink effect */
|
|
@keyframes typerwriter-cursor-blink {
|
|
from, to { border-color: transparent }
|
|
50% { border-color: orange; }
|
|
}
|