Changing Text Content With CSS Animation & Pseudo Elements
SOURCE CODE
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
<style>
*{
margin: 0; padding: 0;
font-family: 'Kaushan Script', cursive;
}
main{
width: 100%; height: 100vh;
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url('vinod.jpeg');
color: white;
display: flex;
justify-content: center; align-items: center;
}
.change-content:after{
content: '';
animation: changetext 10s infinite linear ;
font-size: 4rem;
}
@keyframes changetext{
0% { content:"UI developer"; }
20% { content:"UX developer"; }
40% { content:"Web developer"; }
60% { content: "designer"; }
80% { content: "front end developer"; }
100% { content: "full stack developer"; }
}
</style>
</head>
<body>
<main>
<h1> I am a <span class="change-content"> </span></h1>
<h4> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)</h4>
</main>
</body>
</html>
