Skip to content

Commit 921ea17

Browse files
khuswant18khuswant18
authored
added-Lines-animation (#3293)
1 parent d5f9968 commit 921ea17

3 files changed

Lines changed: 182 additions & 0 deletions

File tree

‎Art/khuswant18-lines/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Lines Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="line line-1"></div>
12+
<div class="line line-2"></div>
13+
<div class="line line-3"></div>
14+
<div class="line line-4"></div>
15+
<div class="line line-5"></div>
16+
<div class="line line-6"></div>
17+
<div class="line line-7"></div>
18+
<div class="line line-8"></div>
19+
<div class="line line-9"></div>
20+
<div class="line line-10"></div>
21+
</div>
22+
</body>
23+
</html>

‎Art/khuswant18-lines/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Lines",
3+
"githubHandle": "khuswant18"
4+
}

‎Art/khuswant18-lines/styles.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
min-height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
13+
overflow: hidden;
14+
}
15+
16+
.container {
17+
position: relative;
18+
width: 600px;
19+
height: 400px;
20+
display: flex;
21+
justify-content: space-around;
22+
align-items: flex-end;
23+
}
24+
25+
.line {
26+
width: 40px;
27+
background: linear-gradient(180deg, #00f5ff 0%, #00a8ff 100%);
28+
border-radius: 20px 20px 0 0;
29+
box-shadow: 0 0 20px rgba(0, 245, 255, 0.5), 0 0 40px rgba(0, 168, 255, 0.3);
30+
position: relative;
31+
}
32+
33+
.line::before {
34+
content: '';
35+
position: absolute;
36+
top: 0;
37+
left: 50%;
38+
transform: translateX(-50%);
39+
width: 20px;
40+
height: 20px;
41+
background: radial-gradient(circle, #ffffff 0%, #00f5ff 100%);
42+
border-radius: 50%;
43+
box-shadow: 0 0 30px #00f5ff;
44+
animation: dotPulse 1.5s ease-in-out infinite;
45+
}
46+
47+
@keyframes dotPulse {
48+
0%, 100% {
49+
transform: translateX(-50%) scale(1);
50+
opacity: 1;
51+
}
52+
50% {
53+
transform: translateX(-50%) scale(1.3);
54+
opacity: 0.7;
55+
}
56+
}
57+
58+
.line-1 {
59+
height: 80px;
60+
animation: lineGrow 2s ease-in-out infinite;
61+
animation-delay: 0s;
62+
}
63+
64+
.line-2 {
65+
height: 150px;
66+
animation: lineGrow 2s ease-in-out infinite;
67+
animation-delay: 0.2s;
68+
}
69+
70+
.line-3 {
71+
height: 200px;
72+
animation: lineGrow 2s ease-in-out infinite;
73+
animation-delay: 0.4s;
74+
}
75+
76+
.line-4 {
77+
height: 120px;
78+
animation: lineGrow 2s ease-in-out infinite;
79+
animation-delay: 0.6s;
80+
}
81+
82+
.line-5 {
83+
height: 180px;
84+
animation: lineGrow 2s ease-in-out infinite;
85+
animation-delay: 0.8s;
86+
}
87+
88+
.line-6 {
89+
height: 140px;
90+
animation: lineGrow 2s ease-in-out infinite;
91+
animation-delay: 1s;
92+
}
93+
94+
.line-7 {
95+
height: 220px;
96+
animation: lineGrow 2s ease-in-out infinite;
97+
animation-delay: 1.2s;
98+
}
99+
100+
.line-8 {
101+
height: 100px;
102+
animation: lineGrow 2s ease-in-out infinite;
103+
animation-delay: 1.4s;
104+
}
105+
106+
.line-9 {
107+
height: 160px;
108+
animation: lineGrow 2s ease-in-out infinite;
109+
animation-delay: 1.6s;
110+
}
111+
112+
.line-10 {
113+
height: 190px;
114+
animation: lineGrow 2s ease-in-out infinite;
115+
animation-delay: 1.8s;
116+
}
117+
118+
@keyframes lineGrow {
119+
0%, 100% {
120+
transform: scaleY(1);
121+
opacity: 1;
122+
}
123+
25% {
124+
transform: scaleY(1.3);
125+
opacity: 0.8;
126+
}
127+
50% {
128+
transform: scaleY(0.7);
129+
opacity: 0.6;
130+
}
131+
75% {
132+
transform: scaleY(1.1);
133+
opacity: 0.9;
134+
}
135+
}
136+
137+
.line:nth-child(even) {
138+
background: linear-gradient(180deg, #ff006e 0%, #ff4d8f 100%);
139+
box-shadow: 0 0 20px rgba(255, 0, 110, 0.5), 0 0 40px rgba(255, 77, 143, 0.3);
140+
}
141+
142+
.line:nth-child(even)::before {
143+
background: radial-gradient(circle, #ffffff 0%, #ff006e 100%);
144+
box-shadow: 0 0 30px #ff006e;
145+
}
146+
147+
.line:nth-child(3n) {
148+
background: linear-gradient(180deg, #7209b7 0%, #9d4edd 100%);
149+
box-shadow: 0 0 20px rgba(114, 9, 183, 0.5), 0 0 40px rgba(157, 78, 221, 0.3);
150+
}
151+
152+
.line:nth-child(3n)::before {
153+
background: radial-gradient(circle, #ffffff 0%, #7209b7 100%);
154+
box-shadow: 0 0 30px #7209b7;
155+
}

0 commit comments

Comments
 (0)