Text Filling With Water code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Filling With Water</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <h1>Water</h1> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: black; font-family: Verdana, Geneva, Tahoma, sans-serif; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .loader h1 { margin: 0; padding: 0; text-transform: uppercase; font-size: 10em; color: rgba(255,255,255,0.1); background-image: url(1.png); background-repeat: repeat-x; -webkit-background-clip: text; animation: animate 15s linear infinite; } @keyframes animate { 0% { background-position: left 0px top 80px; } 40% { background-position: left 800px top -50px; } 80% { background-position: left 1800px top -50px; } 100% { background-position: left 2400px top 80px; } }
