Skip to content

Commit 679c5d6

Browse files
vs-code06vs-code06
authored
Quantum Starburst (#3253)
* temporal-ripples * Temporal Ripples * Fractal Bloom * Quantum Tunnel * Temporal Ripples * Quantum Starburst
1 parent d75236d commit 679c5d6

3 files changed

Lines changed: 93 additions & 0 deletions

File tree

‎Art/vs-code06-QuantumStarburst/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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>Quantum Starburst</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="core"></div>
11+
12+
<div class="orbital o1"></div>
13+
<div class="orbital o2"></div>
14+
<div class="orbital o3"></div>
15+
<div class="orbital o4"></div>
16+
</body>
17+
</html>

‎Art/vs-code06-QuantumStarburst/meta.json‎

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

‎Art/vs-code06-QuantumStarburst/styles.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
background: radial-gradient(circle, #020210, #000);
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
overflow: hidden;
14+
}
15+
16+
.core {
17+
width: 20px;
18+
height: 20px;
19+
background: #ff00ff;
20+
border-radius: 50%;
21+
box-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff;
22+
animation: pulse 2s infinite alternate ease-in-out;
23+
position: absolute;
24+
}
25+
26+
.orbital {
27+
position: absolute;
28+
border-radius: 50%;
29+
border: 2px dashed rgba(255, 0, 255, 0.4);
30+
animation: spin 4s linear infinite;
31+
}
32+
33+
.o1 { width: 80px; height: 80px; animation-duration: 4s; }
34+
.o2 { width: 140px; height: 140px; animation-duration: 6s; }
35+
.o3 { width: 200px; height: 200px; animation-duration: 9s; }
36+
.o4 { width: 260px; height: 260px; animation-duration: 12s; }
37+
38+
.orbital::before {
39+
content: "";
40+
width: 12px;
41+
height: 12px;
42+
background: cyan;
43+
border-radius: 50%;
44+
position: absolute;
45+
top: -6px;
46+
left: 50%;
47+
transform: translateX(-50%);
48+
box-shadow: 0 0 12px cyan, 0 0 24px cyan;
49+
animation: flare 2.5s infinite alternate ease-in-out;
50+
}
51+
52+
@keyframes spin {
53+
from { transform: rotate(0deg); }
54+
to { transform: rotate(360deg); }
55+
}
56+
57+
@keyframes pulse {
58+
0% {
59+
transform: scale(0.8);
60+
box-shadow: 0 0 20px #ff00ff, 0 0 50px #ff00ff;
61+
}
62+
100% {
63+
transform: scale(1.3);
64+
box-shadow: 0 0 35px #ff00ff, 0 0 85px #ff00ff;
65+
}
66+
}
67+
68+
@keyframes flare {
69+
0% { transform: translateX(-50%) scale(1); }
70+
100% { transform: translateX(-50%) scale(1.6); }
71+
}

0 commit comments

Comments
 (0)