File tree 3 files changed +94
-0
lines changed
3 files changed +94
-0
lines changed Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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
+ }
You can’t perform that action at this time.
0 commit comments