Hey friends today, let's see how to make this super cool CSS Liquid Wave text Animation using CSS Only.
Now let's see about this project. When the page is loaded, the text saying 2022 appears. It only has a thin turquoise color border. Then, inside it, there's a wave animation that synchronizes along the text form left to right and vice versa.
Do watch my video tutorial below for better understandings:
Now, let's see the source codes!
Paste the codes below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>CSS Liquid Text Animation | CodingPorium</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*{
padding:0;
margin:0;
box-sizing: border-box;
font-family: poppins,sans-serif;
}
body{
display: flex;
min-height: 100vh;
background: #000;
align-items: center;
justify-content: center;
}
.content{
position:relative;
}
.content h2{
color:#fff;
font-size:8em;
position:absolute;
transform: translate(-50%, -50%);
}
.content h2:nth-child(1){
color:transparent;
-webkit-text-stroke:2px #00e394;
}
.content h2:nth-child(2){
color:#00e394;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate{
0%,
100% {
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
50% {
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
}
</style>
</head>
<body>
<section>
<div class="content">
<h2>2022</h2>
<h2>2022</h2>
</div>
</section>
</body>
</html>
And that's all for this tutorial. Thanks for reading and do subscribe to our YouTube channel to support us. Till the next one, goodbye!
Post a Comment