Hello Guys, In this article or video we will see CSS Creative Text Animation Effects Using Only HTML & CSS. You will use this CSS Text Animation Effect on your website freely. If you learn How to create this CSS Text Animation so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on index.html file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>CSS Creative Text Animation Effects - Pure Coding</title>
</head>
<body>
<div class="container">
<h1 class="text" data-text="Pure Coding...">Pure Coding...</h1>
</div>
</body>
</html>
Then add this code on style.css file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;
1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
background-color: #34495e;
display: flex;
justify-content: center;
align-items: center;
}
.container h1.text {
font-size: 4rem;
color: #34495e;
-webkit-text-stroke: .1rem #2c3e50;
position: relative;
}
.container h1.text::before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
color: #2ecc71;
-webkit-text-stroke: 0;
overflow: hidden;
border-right: 2px solid;
animation: animate 6s infinite;
}
@keyframes animate {
0%, 10%, 100% {
width: 0;
}
50%, 70% {
width: 100%;
}
}
Post a Comment