This is a cool water text animation with only html and css again from DarkCode. Just click on the button Run Pen below to see how it works:
How to create cool water text animation
Step 1: Add Html
<div class="middle">
<h1>Animation</h1>
</div>Step 2: Add CSS
body {
margin: 0;
padding: 0;
font-family: 'montserrat', sans-serif;
background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1571101012/bg_v0tw74.png)
no-repeat;
background-size: cover;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle h1 {
font-size: 100px;
text-transform: uppercase;
font-weight: 900;
color: #2c3e5036;
background-image: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1571101002/water_zvupjx.png);
-webkit-background-clip: text;
animation: water 15s infinite;
}
@keyframes water {
from {
background-position: left 0 top 0;
}
to {
background-position: left 1000px top 0;
}
}