HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title> Animated text typing</title>
</head>
<body>
<divclass="container">
<spanclass="txt myTxt" >I'm a</span>
<spanclass="txt headTxt" >Web-Developer</span>
</div>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
font-family: sans-serif ;
}
body{
background: #000 ;
height: 100vh ;
width: 100vh ;
disable: flex ;
align-items : center ;
justify-content : space-between
}
container {
position : absolute ;
display : flex ;
gap : 20px ;
width : 548px ;
}
container span {
font-size :32px ;
font-weight :700 ;
position :relative ;
}
.container .headText::after {
height :100% ;
position :absolute ;
left :0 ;
content :"" ;
right :0 ;
width :100% ;
background :#555 ;
animation :animate 4s steps(12) infinite ;
border-left :5px solid cyan ;
}
@keyframes animate {
{
left :101% ;
}
{
left :0% ;
}
}
JavaScript
/*Javascript */
const text = document.querySelector("headtext") ;
const drawDots = () =>
{
const setTimeout( () =>
{
text.textContent = "Web-Developer";
text.style.color = "rgb(47, 196, 255)";
},0) ;
}
const setTimeout( () =>
{
text.textContent = "programe";
text.style.color = "rgb(47, 196, 255)";
},4000) ;
const setTimeout( () =>
{
text.textContent = "youtuber";
text.style.color = "rgb(197, 47, 255)";
},8000) ;
}
writetext();
setInterval(writetext, 11000);
