Created
May 31, 2021 01:41
-
-
Save pbrandiezs/03c45769c13e3ccc2aef27f0dc24402e to your computer and use it in GitHub Desktop.
Typing Demo CSS - Original from https://codepen.io/denic/pen/GRoOxbM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.wrapper { | |
height: 100vh; | |
/*This part is important for centering*/ | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.typing-demo { | |
width: 22ch; | |
animation: typing 2s steps(22), blink .5s step-end infinite alternate; | |
white-space: nowrap; | |
overflow: hidden; | |
border-right: 3px solid; | |
font-family: monospace; | |
font-size: 2em; | |
} | |
@keyframes typing { | |
from { | |
width: 0 | |
} | |
} | |
@keyframes blink { | |
50% { | |
border-color: transparent | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrapper"> | |
<div class="typing-demo"> | |
This is a typing demo. | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment