Skip to content

Commit 7bb4655

Browse files
actions-useractions-user
committed
(CI) Run Prettier
1 parent a4880ad commit 7bb4655

3 files changed

Lines changed: 133 additions & 109 deletions

File tree

‎Art/EttyFreund-3D-Particle-Orbit/index.html‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Rainbow Cosmic Loader</title>
7-
<link rel="stylesheet" href="styles.css">
8-
</head>
9-
<body>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
1010
<div class="loader-universe">
11-
<div class="orbit-ring"></div>
12-
<div class="loader-container">
13-
<div class="particle"></div>
14-
<div class="particle"></div>
15-
<div class="particle"></div>
16-
<div class="particle"></div>
17-
<div class="particle"></div>
18-
<div class="particle"></div>
19-
<div class="particle"></div>
20-
<div class="particle"></div>
21-
<div class="particle"></div>
22-
<div class="particle"></div>
23-
<div class="particle"></div>
24-
<div class="particle"></div>
25-
</div>
11+
<div class="orbit-ring"></div>
12+
<div class="loader-container">
13+
<div class="particle"></div>
14+
<div class="particle"></div>
15+
<div class="particle"></div>
16+
<div class="particle"></div>
17+
<div class="particle"></div>
18+
<div class="particle"></div>
19+
<div class="particle"></div>
20+
<div class="particle"></div>
21+
<div class="particle"></div>
22+
<div class="particle"></div>
23+
<div class="particle"></div>
24+
<div class="particle"></div>
25+
</div>
2626
</div>
27-
</body>
28-
</html>
27+
</body>
28+
</html>

‎Art/EttyFreund-3D-Particle-Orbit/meta.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"githubHandle": "EttyFreund",
33
"artName": "3D Rainbow Particle Orbit"
4-
}
4+
}

‎Art/EttyFreund-3D-Particle-Orbit/styles.css‎

Lines changed: 109 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,128 @@
11
body {
2-
margin: 0;
3-
padding: 0;
4-
background: radial-gradient(circle, #080810 0%, #020205 100%);
5-
display: flex;
6-
justify-content: center;
7-
align-items: center;
8-
height: 100vh;
9-
overflow: hidden;
2+
margin: 0;
3+
padding: 0;
4+
background: radial-gradient(circle, #080810 0%, #020205 100%);
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
height: 100vh;
9+
overflow: hidden;
1010
}
1111

1212
.loader-universe {
13-
position: relative;
14-
width: 250px;
15-
height: 250px;
16-
perspective: 800px;
13+
position: relative;
14+
width: 250px;
15+
height: 250px;
16+
perspective: 800px;
1717
}
1818

1919
.orbit-ring {
20-
position: absolute;
21-
width: 100%;
22-
height: 100%;
23-
border: 1px dashed rgba(255, 255, 255, 0.08);
24-
border-radius: 50%;
25-
transform: rotateX(65deg);
26-
box-shadow: 0 0 30px rgba(0, 240, 255, 0.03);
20+
position: absolute;
21+
width: 100%;
22+
height: 100%;
23+
border: 1px dashed rgba(255, 255, 255, 0.08);
24+
border-radius: 50%;
25+
transform: rotateX(65deg);
26+
box-shadow: 0 0 30px rgba(0, 240, 255, 0.03);
2727
}
2828

2929
.loader-container {
30-
position: absolute;
31-
width: 100%;
32-
height: 100%;
33-
transform: rotateX(65deg);
34-
transform-style: preserve-3d;
30+
position: absolute;
31+
width: 100%;
32+
height: 100%;
33+
transform: rotateX(65deg);
34+
transform-style: preserve-3d;
3535
}
3636

3737
.particle {
38-
position: absolute;
39-
width: 18px;
40-
height: 18px;
41-
border-radius: 50%;
42-
left: 0;
43-
top: 0;
44-
right: 0;
45-
bottom: 0;
46-
margin: auto;
47-
48-
/* תנועה מעגלית רציפה */
49-
animation: rainbowOrbit 3s infinite linear;
38+
position: absolute;
39+
width: 18px;
40+
height: 18px;
41+
border-radius: 50%;
42+
left: 0;
43+
top: 0;
44+
right: 0;
45+
bottom: 0;
46+
margin: auto;
47+
48+
/* תנועה מעגלית רציפה */
49+
animation: rainbowOrbit 3s infinite linear;
5050
}
5151

5252
/* חלוקת השהיה (Delay) מדויקת עבור 12 חלקיקים (פעימות של 0.25 שניות) */
53-
.particle:nth-child(1) { animation-delay: 0s; }
54-
.particle:nth-child(2) { animation-delay: -0.25s; }
55-
.particle:nth-child(3) { animation-delay: -0.5s; }
56-
.particle:nth-child(4) { animation-delay: -0.75s; }
57-
.particle:nth-child(5) { animation-delay: -1.0s; }
58-
.particle:nth-child(6) { animation-delay: -1.25s; }
59-
.particle:nth-child(7) { animation-delay: -1.5s; }
60-
.particle:nth-child(8) { animation-delay: -1.75s; }
61-
.particle:nth-child(9) { animation-delay: -2.0s; }
62-
.particle:nth-child(10) { animation-delay: -2.25s; }
63-
.particle:nth-child(11) { animation-delay: -2.5s; }
64-
.particle:nth-child(12) { animation-delay: -2.75s; }
53+
.particle:nth-child(1) {
54+
animation-delay: 0s;
55+
}
56+
.particle:nth-child(2) {
57+
animation-delay: -0.25s;
58+
}
59+
.particle:nth-child(3) {
60+
animation-delay: -0.5s;
61+
}
62+
.particle:nth-child(4) {
63+
animation-delay: -0.75s;
64+
}
65+
.particle:nth-child(5) {
66+
animation-delay: -1s;
67+
}
68+
.particle:nth-child(6) {
69+
animation-delay: -1.25s;
70+
}
71+
.particle:nth-child(7) {
72+
animation-delay: -1.5s;
73+
}
74+
.particle:nth-child(8) {
75+
animation-delay: -1.75s;
76+
}
77+
.particle:nth-child(9) {
78+
animation-delay: -2s;
79+
}
80+
.particle:nth-child(10) {
81+
animation-delay: -2.25s;
82+
}
83+
.particle:nth-child(11) {
84+
animation-delay: -2.5s;
85+
}
86+
.particle:nth-child(12) {
87+
animation-delay: -2.75s;
88+
}
6589

6690
/* האנימציה שעוברת דרך כל צבעי הקשת ומשנה גדלים ליצירת עומק תלת-ממדי */
6791
@keyframes rainbowOrbit {
68-
0% {
69-
transform: rotate(0deg) translateX(100px) rotate(0deg) scale(0.9);
70-
background: #ff0055;
71-
box-shadow: 0 0 15px #ff0055, 0 0 30px #ff0055, inset 0 0 5px #fff;
72-
}
73-
14% {
74-
background: #ff5500;
75-
box-shadow: 0 0 15px #ff5500, 0 0 30px #ff5500, inset 0 0 5px #fff;
76-
}
77-
28% {
78-
background: #ffcc00;
79-
box-shadow: 0 0 15px #ffcc00, 0 0 30px #ffcc00, inset 0 0 5px #fff;
80-
transform: rotate(100deg) translateX(100px) rotate(-100deg) scale(0.7); /* רחוק יותר - קטן */
81-
}
82-
42% {
83-
background: #33ff00;
84-
box-shadow: 0 0 15px #33ff00, 0 0 30px #33ff00, inset 0 0 5px #fff;
85-
}
86-
56% {
87-
background: #00ffcc;
88-
box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc, inset 0 0 5px #fff;
89-
}
90-
70% {
91-
background: #0066ff;
92-
box-shadow: 0 0 15px #0066ff, 0 0 30px #0066ff, inset 0 0 5px #fff;
93-
transform: rotate(250deg) translateX(100px) rotate(-250deg) scale(1.3); /* קרוב יותר - גדול וזוהר */
94-
}
95-
84% {
96-
background: #9900ff;
97-
box-shadow: 0 0 15px #9900ff, 0 0 30px #9900ff, inset 0 0 5px #fff;
98-
}
99-
100% {
100-
transform: rotate(360deg) translateX(100px) rotate(-360deg) scale(0.9);
101-
background: #ff0055;
102-
box-shadow: 0 0 15px #ff0055, 0 0 30px #ff0055, inset 0 0 5px #fff;
103-
}
104-
}
92+
0% {
93+
transform: rotate(0deg) translateX(100px) rotate(0deg) scale(0.9);
94+
background: #ff0055;
95+
box-shadow: 0 0 15px #ff0055, 0 0 30px #ff0055, inset 0 0 5px #fff;
96+
}
97+
14% {
98+
background: #ff5500;
99+
box-shadow: 0 0 15px #ff5500, 0 0 30px #ff5500, inset 0 0 5px #fff;
100+
}
101+
28% {
102+
background: #ffcc00;
103+
box-shadow: 0 0 15px #ffcc00, 0 0 30px #ffcc00, inset 0 0 5px #fff;
104+
transform: rotate(100deg) translateX(100px) rotate(-100deg) scale(0.7); /* רחוק יותר - קטן */
105+
}
106+
42% {
107+
background: #33ff00;
108+
box-shadow: 0 0 15px #33ff00, 0 0 30px #33ff00, inset 0 0 5px #fff;
109+
}
110+
56% {
111+
background: #00ffcc;
112+
box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc, inset 0 0 5px #fff;
113+
}
114+
70% {
115+
background: #0066ff;
116+
box-shadow: 0 0 15px #0066ff, 0 0 30px #0066ff, inset 0 0 5px #fff;
117+
transform: rotate(250deg) translateX(100px) rotate(-250deg) scale(1.3); /* קרוב יותר - גדול וזוהר */
118+
}
119+
84% {
120+
background: #9900ff;
121+
box-shadow: 0 0 15px #9900ff, 0 0 30px #9900ff, inset 0 0 5px #fff;
122+
}
123+
100% {
124+
transform: rotate(360deg) translateX(100px) rotate(-360deg) scale(0.9);
125+
background: #ff0055;
126+
box-shadow: 0 0 15px #ff0055, 0 0 30px #ff0055, inset 0 0 5px #fff;
127+
}
128+
}

0 commit comments

Comments
 (0)