Water Text Mask Filling Animation With Flows Using HTML CSS
In this tutorial, we learn how to create a Water Text effect with flows using CSS?
I hope you will see many types of text effects on multiple websites but here I will discuss water text effect with waves, this design is different from many text effects. for water text effect I will use a static PNG image.
therefore this design creates cool animation effect with water and flow effects, you can use this design in multiple places where you need to implement water effect design.
Today in this program water text filling wave animation created using HTML and pure CSS, therefore in this program, the text animation comes such as moving water waves or flow animation inside the text with infinity repeat.
this design is fully customizable as you change, animation, text, color, background, etc. this water text effect with waves is very is to create, if you have CSS knowledge, then you can understand this program.
I have created this program using HTML and pure CSS, without used any JavaScript Library, therefore you will run this program in the lastest browser such as chrome, Mozilla etc because I have used many CSS3 properties.
therefore, to see the preview click on the given below view demo button, then you will understand the design and Water Text effect, I hope you will enjoy this program.
Explanation of Source Code for Water Text Mask Filling Animation with Flows Using HTML and CSS
let’s discuss the source code which I have used to create the program water text mask filling animation, first of all, click on the above view demo button.
therefore, you will see that I have used two types of text animation, because of having the difference between image color which I have used. first I have used HTML div class="loaderwave" and another div class="loaderwave2".
so, there are two classes which I have used such as loaderwave and loaderwave2, and also put the CSS properties inside these class. such as margin, padding, top, bottom, animation, position, transform, etc. which looks like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.loaderwave { width: 100%; top: 34%; left: 50%; text-align: center; position: absolute; transform: translate(-50%,-50%); } .loaderwave2 { top: 58%; left: 50%; position: absolute; transform: translate(-50%,-50%); } |
therefore I have used two static images which have different color provide the animation, after that for creating animation used CSS @keyframes, the animation for creating flows and go up and down. I have placed these animations with infinite.
furthermore, everything explains in writing will be impossible, I hope you can understand when you get the source code you can understand the code, which I have used.
you can use this code after a few changes according to you need, to create this program I have used two files such as the first file for HTML and another for CSS.
to make this program without error following the given below step:-
First Step: Create HTML file as name “index.html” | Change Filename as you want
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Water Text Filling with animation</title> <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> </head> <body> <div class="loaderwave"> <h1>Water Text</h1> </div> <div class="loaderwave2"> <h1>Animation</h1> </div> </body> </html> |
Second Step: Create CSS File as Name “stylesheet.css” | Change fileName As you want
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
body { background: #262626; font-family: arial; margin: 0; padding: 0; } .loaderwave { width: 100%; top: 34%; left: 50%; text-align: center; position: absolute; transform: translate(-50%,-50%); } .loaderwave h1 { text-transform: uppercase; font-size: 10em; margin: 0; padding: 0; color: rgba(255,225,255,.1); background-image: url("https://www.tutorialscan.com/wp-content/uploads/2019/10/water-bg.png"); background-repeat: repeat-x; -webkit-background-clip: text; animation: animate 15s linear infinite } .loaderwave2 { top: 58%; left: 50%; position: absolute; transform: translate(-50%,-50%); } .loaderwave2 h1 { text-transform: uppercase; font-size: 10em; color: rgba(255,225,255,.1); margin: 0; padding: 0; background-image: url("https://www.tutorialscan.com/wp-content/uploads/2019/10/water-flowbg.png"); background-repeat: repeat-x; -webkit-background-clip: text; animation: animate 15s linear infinite } @keyframes animate { 0% { background-position: left 0px top 78px; } 40% { background-position: left 799px top -49px; } 80% { background-position: left 1799px top -49px; } 100% { background-position: left 2399px top 79px; } } |
you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these posts.
About Author
