Pure CSS Water Wave Text Animation Effect

Pure CSS Water Wave Text Animation Effect

In this tutorial we will see how to create a Pure CSS Water Wave Text Animation Effect. Simple HTML and CSS is used for this purpose, complete code is given.

Table of Contents

HTML Code

Take a look at the HTML code given below.

<!DOCTYPE html>
<html>
    <title>Water wave effect</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <body>
        <div class="content">
            <h2>HOWTOCODESCHOOL</h2>
            <h2>HOWTOCODESCHOOL</h2>
        </div>
    </body>
</html>

CSS Code

CSS code is given below.

<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family:   sans-serif;
}
body {
	display: flex;
	background: #000;
	min-height: 100vh;
	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 #1d6af0;
}
.content h2:nth-child(2) {
	color: #73aaf7;
	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>

Video Tutorial

Watch our video tutorial on How To Create Pure CSS Water Wave Text Animation Effect.

Tags