Skip to content

Instantly share code, notes, and snippets.

@hoangsetup

hoangsetup/index.html

Created May 30, 2023 01:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hoangsetup/639c7ae195412ba501930a0e2014abe5 to your computer and use it in GitHub Desktop.
Save hoangsetup/639c7ae195412ba501930a0e2014abe5 to your computer and use it in GitHub Desktop.
Download ZIP
Text water animation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code The World - IO</title>
<link rel="stylesheet" href="style.css"></style>
</head>
<body>
<div class="middle">
<h1>Animation</h1>
</div>
</body>
</html>
Raw
style.css
/* Coding by @codetheworld_io */
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment