5.6K
Water wave text animation using HTML and CSS
Hello, guys welcome to another tutorial of techmidpoint. In this tutorial, I am going to make a Water wave text animation using HTML and CSS. Here I am using clip-path to make wave animation. If you want to add a clip-path to your design just search clip-path maker on google.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Water wave text animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<h2>WATER</h2>
<h2>WATER</h2>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333;
}
.content {
position: relative;
}
.content h2 {
position: absolute;
transform: translate(-50%, -50%);
font-size: 15em;
text-shadow: -4px 4px 4px #21425e;
}
.content h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px #03a9f4;
}
.content h2:nth-child(2) {
color: #03a9f4;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
0%,
100% {
clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
}
50% {
clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
}
}
For More Tutorials Please Click Here
