You are currently viewing How to Create a Filling Water Animation with CSS and HTML Code?
waving water image #safhatech_design

How to Create a Filling Water Animation with CSS and HTML Code?

Filling Water Animation: In this lesson we will learn how to create a waving water animation as a loading page. The code is only in pure css and HTML. You could get the full code at this post bottom.

This lesson is a part of an animated loading page course. These lessons is supported with: SAFHATECH.COM.

You could see the other videos and lessons by going to safhatech.com and going to categories. From the navigation bar and then loading at design.

The order of this lesson is like this:

  • Creating empty HTML file then add HTML code.
  • Creating empty style-sheet file and then adding CSS style.
  • Download the water wave image.

Lesson 16

This Video explain the same topic ” Rolling Tire Animation”:

https://youtu.be/0wmRcnyRIY8

Creating empty HTML file then add HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wave">
    <span>Loading..</span>
</div>
</body>
</html>

Creating empty style-sheet file and then adding CSS style:

body{
    padding: 0;
    margin: 0;
    background-color: #193c2c;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.wave span{
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-size: 13em;
    font-family: Tahoma;
    color: rgba(0,0,0,0.3);
    background-image: url("cover.png");
    background-repeat: repeat-x;
    -webkit-background-clip: text;
    animation: animate 10s linear infinite;
}

@keyframes animate {
    0%{
        background-position: left 0 top 200px;
    }
    100%{
        background-position: left 5000px top -20px;
    }
}

Download the water wave image:

You could download the waving image at freepik.com and search for waving image. Or download the code archive and the image will be inside

waving water image

Finally: You could Download the code from here:



Consequently You could follow us at :

Website URL: https://www.safhatech.com/

YouTube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instagram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone: 967778283416

This Post Has 7 Comments

  1. That is very fascinating, You are an overly professional blogger.
    I have joined your rss feed and look forward to looking for extra of your great post.
    Additionally, I have shared your web site in my social networks

  2. 먹튀

    I’ll immediately seize your rss as I can not find your email subscription link or newsletter service.
    Do you have any? Please permit me recognise in order that I could subscribe.
    Thanks.

  3. WOW just what I was searching for. Came here by searching for 온라인카지노

  4. Wow that was strange. I just wrote an very long comment but after I clicked submit my comment didn’t show up.
    Grrrr… well I’m not writing all that over
    again. Anyways, just wanted to say superb blog!

  5. Usually I don’t learn article on blogs, but I would like to say that this write-up very pressured me
    to check out and do so! Your writing taste has been amazed me.
    Thank you, very great article.

  6. Hello! I’ve been following your web site for some time now and finally got the courage to go ahead and give you a shout
    out from Huffman Tx! Just wanted to mention keep up the great job!

  7. Nice blog! Is your theme custom made or did you download it
    from somewhere? A theme like yours with a few simple tweeks would really make my blog shine.
    Please let me know where you got your theme.

    Many thanks

Leave a Reply