Looking to add some creative flair to your website? Check out these CSS Text Animation Effects for 2024! In this video, we'll show you how to bring your text to life with stylish animations that will captivate your visitors. From subtle fades to eye-catching transitions, you'll learn how to easily implement these effects on your website using CSS. Watch now and take your web design to the next level!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 data-text="@CodingWithNexus">@Coding With Nexus</h2>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:black ;
}
h2{
position: relative;
font-size: 2vw;
color: black;
-webkit-text-stroke: 0.2vw black;
}
h2::before{
content: attr(data-text);
position: absolute;
width: 0;
height: 100%;
top: 0;
left: 0;
color: rgb(238, 239, 246);
text-shadow: 0 0 5px rgb(13, 127, 235);
-webkit-text-stroke: 0vw rgb(9, 33, 152);
border-right: 5px solid rgb(6, 23, 91);
overflow: hidden;
animation: animate 6s linear infinite;
}
@keyframes animate{
0% {
width: 0;
}
70%{
width: 100%;
}
}
Comments
Post a Comment