Water wave text animation using HTML and CSS
Hello, guys! Welcome to another exciting tutorial from Techmidpoint. In this session, I’ll show you how to create a mesmerizing Water Wave Text Animation using HTML and CSS. We’ll be leveraging the power of clip-path to bring the wave effect to life. If you’re looking to incorporate clip-path into your own designs, just search for a clip-path maker on Google. Let’s dive in and make some waves!
Source Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Water Wave Text Animation Effect</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Gluten:wght@600&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #e8e8e8;
}
.content
{
position: relative;
}
.content h2
{
position: absolute;
transform: translate(-50%,-50%);
font-size: 15em;
}
.content h2:nth-child(1)
{
color: transparent;
-webkit-text-stroke: 3px #333;
filter: blur(3px);
}
.content h2:nth-child(2)
{
color: #03a9f4;
z-index: 10000;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate
{
0%,100%
{
clip-path: polygon(0 40%, 17% 38%, 33% 41%, 51% 53%, 65% 61%, 82% 64%, 100% 60%, 100% 100%, 0% 100%);
}
50%
{
clip-path: polygon(0 55%, 16% 61%, 35% 60%, 51% 53%, 67% 45%, 82% 39%, 100% 40%, 100% 100%, 0% 100%);
}
}
.content h2:nth-child(3)
{
color: #fff6;
filter: drop-shadow(0 15px 15px #fff);
z-index: 122;
text-shadow: -15px 15px 15px rgba(0,0,0,0.2),
15px -15px 15px rgba(255,255,255,0.2);
}
</style>
</head>
<body>
<div class="content">
<h2>Water</h2>
<h2>Water</h2>
<h2>Water</h2>
</div>
</body>
</html>
