Skip to content

Commit 045623b

Browse files
Lakshya182005Lakshya182005
authored
add Falling water (#3262)
* add Falling water * add falling water * add falling water
1 parent ad7824b commit 045623b

3 files changed

Lines changed: 214 additions & 0 deletions

File tree

‎Art/Lakshya182005_Falling_water/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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>Falling Water</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="scene">
11+
<div class="waterfall">
12+
<div class="stream stream1"></div>
13+
<div class="stream stream2"></div>
14+
<div class="stream stream3"></div>
15+
<div class="stream stream4"></div>
16+
<div class="stream stream5"></div>
17+
<div class="stream stream6"></div>
18+
<div class="stream stream7"></div>
19+
<div class="stream stream8"></div>
20+
</div>
21+
<div class="pool">
22+
<div class="ripple ripple1"></div>
23+
<div class="ripple ripple2"></div>
24+
<div class="ripple ripple3"></div>
25+
</div>
26+
<div class="splash-container">
27+
<div class="drop drop1"></div>
28+
<div class="drop drop2"></div>
29+
<div class="drop drop3"></div>
30+
<div class="drop drop4"></div>
31+
<div class="drop drop5"></div>
32+
</div>
33+
</div>
34+
</body>
35+
</html>

‎Art/Lakshya182005_Falling_water/meta.json‎

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

‎Art/Lakshya182005_Falling_water/styles.css‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: linear-gradient(to bottom, #1e3a5f 0%, #2c5f7f 100%);
9+
height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
.scene {
17+
position: relative;
18+
width: 600px;
19+
height: 500px;
20+
}
21+
22+
.waterfall {
23+
position: absolute;
24+
top: 0;
25+
left: 50%;
26+
transform: translateX(-50%);
27+
width: 200px;
28+
height: 350px;
29+
display: flex;
30+
justify-content: space-around;
31+
}
32+
33+
.stream {
34+
width: 20px;
35+
height: 100%;
36+
background: linear-gradient(to bottom,
37+
rgba(173, 216, 230, 0.8) 0%,
38+
rgba(135, 206, 250, 0.9) 50%,
39+
rgba(100, 180, 220, 1) 100%);
40+
border-radius: 10px;
41+
animation: flow 1.5s linear infinite;
42+
opacity: 0.7;
43+
box-shadow: 0 0 10px rgba(135, 206, 250, 0.5);
44+
}
45+
46+
.stream1 { animation-delay: 0s; }
47+
.stream2 { animation-delay: 0.1s; }
48+
.stream3 { animation-delay: 0.2s; }
49+
.stream4 { animation-delay: 0.3s; }
50+
.stream5 { animation-delay: 0.4s; }
51+
.stream6 { animation-delay: 0.5s; }
52+
.stream7 { animation-delay: 0.6s; }
53+
.stream8 { animation-delay: 0.7s; }
54+
55+
.pool {
56+
position: absolute;
57+
bottom: 50px;
58+
left: 50%;
59+
transform: translateX(-50%);
60+
width: 300px;
61+
height: 60px;
62+
background: linear-gradient(to bottom,
63+
rgba(100, 180, 220, 0.8) 0%,
64+
rgba(70, 130, 180, 0.9) 100%);
65+
border-radius: 50%;
66+
box-shadow: 0 0 30px rgba(135, 206, 250, 0.6),
67+
inset 0 -10px 20px rgba(0, 0, 0, 0.2);
68+
}
69+
70+
.ripple {
71+
position: absolute;
72+
top: 50%;
73+
left: 50%;
74+
transform: translate(-50%, -50%);
75+
width: 50px;
76+
height: 10px;
77+
border: 2px solid rgba(173, 216, 230, 0.6);
78+
border-radius: 50%;
79+
animation: rippleEffect 2s ease-out infinite;
80+
}
81+
82+
.ripple1 { animation-delay: 0s; }
83+
.ripple2 { animation-delay: 0.7s; }
84+
.ripple3 { animation-delay: 1.4s; }
85+
86+
.splash-container {
87+
position: absolute;
88+
bottom: 110px;
89+
left: 50%;
90+
transform: translateX(-50%);
91+
width: 100px;
92+
height: 50px;
93+
}
94+
95+
.drop {
96+
position: absolute;
97+
width: 8px;
98+
height: 8px;
99+
background: radial-gradient(circle, rgba(173, 216, 230, 0.9) 0%, rgba(135, 206, 250, 0.6) 100%);
100+
border-radius: 50%;
101+
animation: splash 1.5s ease-out infinite;
102+
}
103+
104+
.drop1 {
105+
left: 30%;
106+
animation-delay: 0s;
107+
}
108+
109+
.drop2 {
110+
left: 50%;
111+
animation-delay: 0.2s;
112+
}
113+
114+
.drop3 {
115+
left: 70%;
116+
animation-delay: 0.4s;
117+
}
118+
119+
.drop4 {
120+
left: 40%;
121+
animation-delay: 0.6s;
122+
}
123+
124+
.drop5 {
125+
left: 60%;
126+
animation-delay: 0.8s;
127+
}
128+
129+
@keyframes flow {
130+
0% {
131+
transform: translateY(-100%) scaleY(0.8);
132+
opacity: 0;
133+
}
134+
10% {
135+
opacity: 0.7;
136+
}
137+
100% {
138+
transform: translateY(100%) scaleY(1.2);
139+
opacity: 0.9;
140+
}
141+
}
142+
143+
@keyframes rippleEffect {
144+
0% {
145+
width: 50px;
146+
height: 10px;
147+
opacity: 1;
148+
}
149+
100% {
150+
width: 250px;
151+
height: 50px;
152+
opacity: 0;
153+
}
154+
}
155+
156+
@keyframes splash {
157+
0% {
158+
transform: translate(0, 0) scale(1);
159+
opacity: 1;
160+
}
161+
50% {
162+
transform: translate(var(--x, 20px), -30px) scale(0.8);
163+
opacity: 0.8;
164+
}
165+
100% {
166+
transform: translate(var(--x, 40px), 10px) scale(0.3);
167+
opacity: 0;
168+
}
169+
}
170+
171+
.drop1 { --x: -25px; }
172+
.drop2 { --x: 0px; }
173+
.drop3 { --x: 25px; }
174+
.drop4 { --x: -15px; }
175+
.drop5 { --x: 15px; }

0 commit comments

Comments
 (0)