Add a text element with the correct Tag (H1/H2/etc)
Add the following CSS to the custom CSS of the element, and adapt the Tag. The code is for H1.
Adapt the width to the size of your text and element. Because it won't wrap.
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
/* Base */
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
h1 {
position: relative;
color: hsl(0, 0%, 68%);
font-weight: bold;
letter-spacing: 7px;
overflow: hidden;
border-right: 2px solid hsl(0, 0%, 80%);
white-space: nowrap;
animation: typewriter 4s steps(66) 1s 1 normal both,
blinkTextCursor 500ms infinite;
}
@keyframes typewriter {
from {
width: 0;
}
to {
width: 10em;
}
}
@keyframes blinkTextCursor {
from {
border-right-color: hsl(0, 0%, 80%);
}
to {
border-right-color: transparent;
}
}
Thanks
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want
And feel free to ask for tutorials or tips that you would like to discover on the site