This is a <span class="type" >CSS only solution for a multi-line writer effect.</span>
body {
font-family: monospace;
font-weight: 700;
font-size:50px;
padding:20px;
background:#005F6B;
color:#00DFFC
}
.type {
color:#0000;
background:
linear-gradient(#00DFFC 0 0) 0 50%/150% 95%,
linear-gradient(#00DFFC 0 0) 0 0 /100% 100%;
-webkit-background-clip:padding-box,text;
background-clip:padding-box,text;
background-repeat:no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
animation:
t 1s forwards,
b 1s .8s forwards;
}
@keyframes t{
from {background-size:0 95%,0 100%}
}
@keyframes b{
100% {background-position:-200% 50%,0 0}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.