Skip to content

Commit 09a0336

Browse files
committed
Liquid Text Animation added with readme
1 parent 81d0f73 commit 09a0336

File tree

3 files changed

+94
-0
lines changed

3 files changed

+94
-0
lines changed

Liquid Text/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
# Liquid Text Animation
3+
using CSS giving liquidy wave to the text
4+
5+
## 🚀 About Me
6+
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
7+
8+
9+
## Run Locally
10+
11+
Clone the project
12+
13+
14+
Start the live server
15+
16+
17+
## Used By
18+
19+
This project is used by the following companies:
20+
21+
-https://github.com/Dezenix/frontend-html-css-js

Liquid Text/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Liquid Text Animation</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>DEZENIX</h1>
13+
<h1>DEZENIX</h1>
14+
</div>
15+
</body>
16+
</html>

Liquid Text/style.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body{
2+
display: flex;
3+
background: BLACK;
4+
height: 74vh;
5+
align-items: center;
6+
justify-content: center;
7+
}
8+
9+
.container{
10+
position: relative;
11+
}
12+
13+
.container h1{
14+
letter-spacing: 10px;
15+
color: aliceblue;
16+
font-size: 10rem;
17+
position: absolute;
18+
transform: translate(-50%,-50%);
19+
}
20+
21+
.container h1:nth-child(1){
22+
color: transparent;
23+
-webkit-text-stroke: 3px rgb(0, 255, 157);
24+
}
25+
.container h1:nth-child(2){
26+
color: rgb(183, 255, 0);
27+
animation: float 2s ease-in-out infinite;
28+
}
29+
30+
@keyframes float{
31+
0%,100%{
32+
clip-path: polygon(
33+
0% 35%,
34+
14% 48%,
35+
35% 60%,
36+
54% 66%,
37+
70% 61%,
38+
84% 59%,
39+
100% 52%,
40+
100% 100%,
41+
0% 100%
42+
);
43+
}
44+
50%{
45+
clip-path: polygon(
46+
0% 60%,
47+
15% 65%,
48+
34% 66%,
49+
51% 62%,
50+
67% 50%,
51+
84% 45%,
52+
100% 33%,
53+
100% 100%,
54+
0% 100%
55+
)
56+
}
57+
}

0 commit comments

Comments
 (0)