CSS Water Filling Text Animation With Waves | Water Wave Text Mask

How we can create a water fill effect on a text using CSS? Solution: CSS Water Filling Text Animation With Waves, Water Wave Mask on Text.

Previously I have shared Direction Fill Effect On Hover, now its time for water type filling. This designs its something like text mask with GIF, but it is with a static PNG image. The combination of water and wave effects creates a cool animation, and you can use it in many places.

Today you will learn to crate Water Wave Text Mask using HTML and CSS3. There is a moving water waves animation inside the text with infinity repeat. You also can use this as a loading screen animation, this will look good also in that place. This design is customizable, you can change color, animation, text, etc.

So, Today I am sharing CSS Water Filling Text Animation With Waves. I have created this using pure HTML and CSS, this is without JavaScript and any library. I think this will work only lastest browsers or newest versions for chrome, edge, Mozilla, etc. Because outdated browsers do not support many CSS3 properties.

If you are thinking now how this water wave animation actually is, then see the preview given below.

Preview Of Water Wave Text Mask

See this video preview to getting an idea of how this animation looks like.

https://webdevtrick.com/wp-content/uploads/water-text-mask.mp4?_=1

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• CSS Multi Layer Navigation
• One Page Portfolio Template
• Horizontal Scroll Navigation
• HTML CSS Pagination Design

CSS Water Filling Text Animation With Waves Source Code

Before sharing source code, let’s talk about it. As you can see in the preview, there are two types of text animation. There is only a difference in the image color I have used.  First I have created an HTML div and put text inside it, I gave two CSS class named in the div. First’s name is loading and the second is wave. Now its looks like this: <div class="loading wave"> .

Now using CSS I have placed the text on the right place. There is two class on our div, using the first “loading” class I have placed the text and gave font-size, font-family, height, width, position, etc. Using the second class “wave” I have created the animation and masking. I have used the clipping mask method with text and put the PNG image in the background.

For creating the mask I have used CSS background-clip: text; command (info), and put the color transparent. After that, I have created two animations using CSS @keyframe .  One animation for creating waves and another for go up and then down, I have placed these two animations with infinite and linear.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this animation you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

That’s It. Now you have successfully created CSS Water Filling Text Animation With Waves, Water Wave Text Mask. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.