Home » Water wave text animation using HTML and CSS

Water wave text animation using HTML and CSS

by techmidpoint
Water wave text animation using HTML and CSS

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

You may also like

Leave a Comment