water text animation using html css
water text animation using html css
HTML CODE
SAVE AS- 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>Water text Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="liquid">
<h2>Gaurav</h2>
<h2>Gaurav</h2>
<h2>Gaurav</h2>
<h2>Gaurav</h2>
</div>
</body>
</html>
CSS CODE
save as Style.css
@import url('https://fonts.googleapis.com/css?family=Calligraffitti|Open+Sans');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Calligraffitti", sans;
max-width: 100%;
max-height: 100%;
}
.liquid {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #183954;
}
.liquid h2 {
position: absolute;
font-size: 26vw;
}
.liquid h2:nth-child(1) {
color: #fff;
text-shadow: -2px 2px 0px #183954, -4px 4px 0px #183954, -6px 6px 0px #183954, -8px 8px 0px #183954, -18px 18px 20px rgba(0, 0, 0, 0.5), -18px 18px 50px rgba(0, 0, 0, 0.5);
}
.liquid h2:nth-child(2) {
color: #2196f3;
opacity: 0.5;
animation: animate 3s ease-in-out infinite;
}
.liquid h2:nth-child(3) {
color: #2196f3;
opacity: 0.5;
animation: animate 5s ease-in-out infinite;
}
.liquid h2:nth-child(4) {
color: #2196f3;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
0%,
100% {
clip-path: polygon(0% 46%, 16% 45%, 34% 52%, 50% 61%, 68% 65%, 85% 61%, 100% 53%, 100% 100%, 0% 100%);
}
50% {
clip-path: polygon(0% 66%, 14% 73%, 34% 76%, 50% 71%, 64% 62%, 79% 55%, 100% 51%, 100% 100%, 0% 100%);
}
}
Comments
Post a Comment