Skip to content

Commit 6b0589c

Browse files
Aviral02gitAviral02git
authored
add Particle-Explosion (#3282)
* add Particle-Explosion * add Particle-Explosion
1 parent 07563e4 commit 6b0589c

3 files changed

Lines changed: 263 additions & 0 deletions

File tree

‎Art/Aviral02git-Particle-Explosion/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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>Particle Explosion</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="core"></div>
12+
<div class="particle p1"></div>
13+
<div class="particle p2"></div>
14+
<div class="particle p3"></div>
15+
<div class="particle p4"></div>
16+
<div class="particle p5"></div>
17+
<div class="particle p6"></div>
18+
<div class="particle p7"></div>
19+
<div class="particle p8"></div>
20+
<div class="particle p9"></div>
21+
<div class="particle p10"></div>
22+
<div class="particle p11"></div>
23+
<div class="particle p12"></div>
24+
<div class="particle p13"></div>
25+
<div class="particle p14"></div>
26+
<div class="particle p15"></div>
27+
<div class="particle p16"></div>
28+
<div class="particle p17"></div>
29+
<div class="particle p18"></div>
30+
<div class="particle p19"></div>
31+
<div class="particle p20"></div>
32+
</div>
33+
</body>
34+
</html>

‎Art/Aviral02git-Particle-Explosion/meta.json‎

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

‎Art/Aviral02git-Particle-Explosion/styles.css‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: radial-gradient(circle at center, #0f0c29, #302b63, #24243e);
9+
height: 100vh;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
.container {
17+
position: relative;
18+
width: 400px;
19+
height: 400px;
20+
}
21+
22+
.core {
23+
position: absolute;
24+
top: 50%;
25+
left: 50%;
26+
width: 40px;
27+
height: 40px;
28+
transform: translate(-50%, -50%);
29+
background: radial-gradient(circle, #fff, #ffeb3b, #ff5722);
30+
border-radius: 50%;
31+
animation: pulse 2s ease-in-out infinite;
32+
box-shadow:
33+
0 0 20px #ffeb3b,
34+
0 0 40px #ff5722,
35+
0 0 60px #ff5722,
36+
inset 0 0 20px #fff;
37+
z-index: 10;
38+
}
39+
40+
.particle {
41+
position: absolute;
42+
top: 50%;
43+
left: 50%;
44+
width: 12px;
45+
height: 12px;
46+
border-radius: 50%;
47+
transform-origin: center;
48+
}
49+
50+
.p1 {
51+
background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
52+
animation: explode 3s ease-out infinite;
53+
animation-delay: 0s;
54+
box-shadow: 0 0 15px #ff6b6b;
55+
}
56+
57+
.p2 {
58+
background: linear-gradient(135deg, #4ecdc4, #44a08d);
59+
animation: explode 3s ease-out infinite;
60+
animation-delay: 0.15s;
61+
box-shadow: 0 0 15px #4ecdc4;
62+
}
63+
64+
.p3 {
65+
background: linear-gradient(135deg, #f7b731, #f39c12);
66+
animation: explode 3s ease-out infinite;
67+
animation-delay: 0.3s;
68+
box-shadow: 0 0 15px #f7b731;
69+
}
70+
71+
.p4 {
72+
background: linear-gradient(135deg, #5f27cd, #341f97);
73+
animation: explode 3s ease-out infinite;
74+
animation-delay: 0.45s;
75+
box-shadow: 0 0 15px #5f27cd;
76+
}
77+
78+
.p5 {
79+
background: linear-gradient(135deg, #ff9ff3, #f368e0);
80+
animation: explode 3s ease-out infinite;
81+
animation-delay: 0.6s;
82+
box-shadow: 0 0 15px #ff9ff3;
83+
}
84+
85+
.p6 {
86+
background: linear-gradient(135deg, #48dbfb, #0abde3);
87+
animation: explode 3s ease-out infinite;
88+
animation-delay: 0.75s;
89+
box-shadow: 0 0 15px #48dbfb;
90+
}
91+
92+
.p7 {
93+
background: linear-gradient(135deg, #1dd1a1, #10ac84);
94+
animation: explode 3s ease-out infinite;
95+
animation-delay: 0.9s;
96+
box-shadow: 0 0 15px #1dd1a1;
97+
}
98+
99+
.p8 {
100+
background: linear-gradient(135deg, #ff6348, #e74c3c);
101+
animation: explode 3s ease-out infinite;
102+
animation-delay: 1.05s;
103+
box-shadow: 0 0 15px #ff6348;
104+
}
105+
106+
.p9 {
107+
background: linear-gradient(135deg, #feca57, #ff9ff3);
108+
animation: explode 3s ease-out infinite;
109+
animation-delay: 1.2s;
110+
box-shadow: 0 0 15px #feca57;
111+
}
112+
113+
.p10 {
114+
background: linear-gradient(135deg, #54a0ff, #2e86de);
115+
animation: explode 3s ease-out infinite;
116+
animation-delay: 1.35s;
117+
box-shadow: 0 0 15px #54a0ff;
118+
}
119+
120+
.p11 {
121+
background: linear-gradient(135deg, #00d2d3, #01a3a4);
122+
animation: explode 3s ease-out infinite;
123+
animation-delay: 1.5s;
124+
box-shadow: 0 0 15px #00d2d3;
125+
}
126+
127+
.p12 {
128+
background: linear-gradient(135deg, #ff6b81, #fd79a8);
129+
animation: explode 3s ease-out infinite;
130+
animation-delay: 1.65s;
131+
box-shadow: 0 0 15px #ff6b81;
132+
}
133+
134+
.p13 {
135+
background: linear-gradient(135deg, #a29bfe, #6c5ce7);
136+
animation: explode 3s ease-out infinite;
137+
animation-delay: 1.8s;
138+
box-shadow: 0 0 15px #a29bfe;
139+
}
140+
141+
.p14 {
142+
background: linear-gradient(135deg, #fd79a8, #e84393);
143+
animation: explode 3s ease-out infinite;
144+
animation-delay: 1.95s;
145+
box-shadow: 0 0 15px #fd79a8;
146+
}
147+
148+
.p15 {
149+
background: linear-gradient(135deg, #fdcb6e, #e17055);
150+
animation: explode 3s ease-out infinite;
151+
animation-delay: 2.1s;
152+
box-shadow: 0 0 15px #fdcb6e;
153+
}
154+
155+
.p16 {
156+
background: linear-gradient(135deg, #55efc4, #00b894);
157+
animation: explode 3s ease-out infinite;
158+
animation-delay: 2.25s;
159+
box-shadow: 0 0 15px #55efc4;
160+
}
161+
162+
.p17 {
163+
background: linear-gradient(135deg, #74b9ff, #0984e3);
164+
animation: explode 3s ease-out infinite;
165+
animation-delay: 2.4s;
166+
box-shadow: 0 0 15px #74b9ff;
167+
}
168+
169+
.p18 {
170+
background: linear-gradient(135deg, #a29bfe, #6c5ce7);
171+
animation: explode 3s ease-out infinite;
172+
animation-delay: 2.55s;
173+
box-shadow: 0 0 15px #a29bfe;
174+
}
175+
176+
.p19 {
177+
background: linear-gradient(135deg, #fab1a0, #e17055);
178+
animation: explode 3s ease-out infinite;
179+
animation-delay: 2.7s;
180+
box-shadow: 0 0 15px #fab1a0;
181+
}
182+
183+
.p20 {
184+
background: linear-gradient(135deg, #ff7675, #d63031);
185+
animation: explode 3s ease-out infinite;
186+
animation-delay: 2.85s;
187+
box-shadow: 0 0 15px #ff7675;
188+
}
189+
190+
@keyframes pulse {
191+
0%, 100% {
192+
transform: translate(-50%, -50%) scale(1);
193+
box-shadow:
194+
0 0 20px #ffeb3b,
195+
0 0 40px #ff5722,
196+
0 0 60px #ff5722,
197+
inset 0 0 20px #fff;
198+
}
199+
50% {
200+
transform: translate(-50%, -50%) scale(1.3);
201+
box-shadow:
202+
0 0 30px #ffeb3b,
203+
0 0 60px #ff5722,
204+
0 0 90px #ff5722,
205+
inset 0 0 30px #fff;
206+
}
207+
}
208+
209+
@keyframes explode {
210+
0% {
211+
transform: translate(-50%, -50%) rotate(0deg) translateX(0) scale(0);
212+
opacity: 0;
213+
}
214+
10% {
215+
opacity: 1;
216+
}
217+
50% {
218+
transform: translate(-50%, -50%) rotate(180deg) translateX(150px) scale(1);
219+
opacity: 1;
220+
}
221+
100% {
222+
transform: translate(-50%, -50%) rotate(360deg) translateX(200px) scale(0);
223+
opacity: 0;
224+
}
225+
}

0 commit comments

Comments
 (0)