THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Changing Text Content With CSS Animation & Pseudo Elements

Changing Text Content With CSS Animation & Pseudo Elements






SOURCE CODE 


<!DOCTYPE html>
<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>

No comments:

Post a Comment