Skip to content

Commit dc76db8

Browse files
mister2freshmister2fresh
authored
Submits animation files (#3337)
* Submits animation files * Remove extra indentation from CSS * Corrects stylesheet name and href
1 parent b973e1f commit dc76db8

3 files changed

Lines changed: 294 additions & 0 deletions

File tree

‎Art/mister2fresh-eventhorizon/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
<link href="styles.css" rel="stylesheet">
7+
<title>Event Horizon</title>
8+
</head>
9+
<body>
10+
<div class="title">Event Horizon</div>
11+
<div class="container">
12+
<div class="glow"></div>
13+
<div class="accretion-disk"></div>
14+
<div class="ring ring1"></div>
15+
<div class="ring ring2"></div>
16+
<div class="ring ring3"></div>
17+
<div class="particle particle1"></div>
18+
<div class="particle particle2"></div>
19+
<div class="particle particle3"></div>
20+
<div class="particle particle4"></div>
21+
<div class="particle particle5"></div>
22+
<div class="particle particle6"></div>
23+
<div class="black-hole"></div>
24+
</div>
25+
</body>
26+
</html>

‎Art/mister2fresh-eventhorizon/meta.json‎

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

‎Art/mister2fresh-eventhorizon/styles.css‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background: #000;
10+
overflow: hidden;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
}
16+
17+
.container {
18+
position: relative;
19+
width: 600px;
20+
height: 600px;
21+
}
22+
23+
.black-hole {
24+
position: absolute;
25+
top: 50%;
26+
left: 50%;
27+
transform: translate(-50%, -50%);
28+
width: 150px;
29+
height: 150px;
30+
background: radial-gradient(circle, #000 0%, #111 70%, #222 100%);
31+
border-radius: 50%;
32+
box-shadow:
33+
0 0 50px 20px rgba(0, 0, 0, 0.8),
34+
inset 0 0 30px rgba(0, 0, 0, 1);
35+
z-index: 10;
36+
}
37+
38+
.accretion-disk {
39+
position: absolute;
40+
top: 50%;
41+
left: 50%;
42+
transform: translate(-50%, -50%);
43+
width: 500px;
44+
height: 500px;
45+
border-radius: 50%;
46+
background: conic-gradient(
47+
from 0deg,
48+
transparent,
49+
rgba(255, 100, 0, 0.3),
50+
rgba(255, 150, 50, 0.5),
51+
rgba(255, 200, 100, 0.4),
52+
transparent
53+
);
54+
animation: rotate 8s linear infinite;
55+
}
56+
57+
.ring {
58+
position: absolute;
59+
top: 50%;
60+
left: 50%;
61+
transform: translate(-50%, -50%);
62+
border-radius: 50%;
63+
border: 2px solid;
64+
animation: pulse-ring 3s ease-in-out infinite;
65+
}
66+
67+
.ring1 {
68+
width: 200px;
69+
height: 200px;
70+
border-color: rgba(255, 150, 50, 0.6);
71+
animation-delay: 0s;
72+
}
73+
74+
.ring2 {
75+
width: 300px;
76+
height: 300px;
77+
border-color: rgba(255, 120, 30, 0.5);
78+
animation-delay: 1s;
79+
}
80+
81+
.ring3 {
82+
width: 400px;
83+
height: 400px;
84+
border-color: rgba(255, 100, 20, 0.4);
85+
animation-delay: 2s;
86+
}
87+
88+
.particle {
89+
position: absolute;
90+
width: 4px;
91+
height: 4px;
92+
background: #fff;
93+
border-radius: 50%;
94+
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
95+
}
96+
97+
.particle1 {
98+
top: 20%;
99+
left: 80%;
100+
animation: spiral1 6s linear infinite;
101+
}
102+
103+
.particle2 {
104+
top: 60%;
105+
left: 10%;
106+
animation: spiral2 7s linear infinite;
107+
}
108+
109+
.particle3 {
110+
top: 40%;
111+
left: 90%;
112+
animation: spiral3 5s linear infinite;
113+
}
114+
115+
.particle4 {
116+
top: 80%;
117+
left: 50%;
118+
animation: spiral4 8s linear infinite;
119+
}
120+
121+
.particle5 {
122+
top: 10%;
123+
left: 30%;
124+
animation: spiral5 6.5s linear infinite;
125+
}
126+
127+
.particle6 {
128+
top: 70%;
129+
left: 70%;
130+
animation: spiral6 7.5s linear infinite;
131+
}
132+
133+
.glow {
134+
position: absolute;
135+
top: 50%;
136+
left: 50%;
137+
transform: translate(-50%, -50%);
138+
width: 250px;
139+
height: 250px;
140+
background: radial-gradient(circle, rgba(255, 150, 50, 0.3), transparent 70%);
141+
border-radius: 50%;
142+
animation: glow-pulse 4s ease-in-out infinite;
143+
}
144+
145+
@keyframes rotate {
146+
from {
147+
transform: translate(-50%, -50%) rotate(0deg);
148+
}
149+
to {
150+
transform: translate(-50%, -50%) rotate(360deg);
151+
}
152+
}
153+
154+
@keyframes pulse-ring {
155+
0%, 100% {
156+
transform: translate(-50%, -50%) scale(1);
157+
opacity: 0.6;
158+
}
159+
50% {
160+
transform: translate(-50%, -50%) scale(1.1);
161+
opacity: 0.3;
162+
}
163+
}
164+
165+
@keyframes glow-pulse {
166+
0%, 100% {
167+
opacity: 0.5;
168+
transform: translate(-50%, -50%) scale(1);
169+
}
170+
50% {
171+
opacity: 0.8;
172+
transform: translate(-50%, -50%) scale(1.2);
173+
}
174+
}
175+
176+
@keyframes spiral1 {
177+
0% {
178+
transform: rotate(0deg) translateX(250px) rotate(0deg);
179+
opacity: 1;
180+
}
181+
100% {
182+
transform: rotate(360deg) translateX(0px) rotate(-360deg);
183+
opacity: 0;
184+
}
185+
}
186+
187+
@keyframes spiral2 {
188+
0% {
189+
transform: rotate(60deg) translateX(280px) rotate(-60deg);
190+
opacity: 1;
191+
}
192+
100% {
193+
transform: rotate(420deg) translateX(0px) rotate(-420deg);
194+
opacity: 0;
195+
}
196+
}
197+
198+
@keyframes spiral3 {
199+
0% {
200+
transform: rotate(120deg) translateX(260px) rotate(-120deg);
201+
opacity: 1;
202+
}
203+
100% {
204+
transform: rotate(480deg) translateX(0px) rotate(-480deg);
205+
opacity: 0;
206+
}
207+
}
208+
209+
@keyframes spiral4 {
210+
0% {
211+
transform: rotate(180deg) translateX(290px) rotate(-180deg);
212+
opacity: 1;
213+
}
214+
100% {
215+
transform: rotate(540deg) translateX(0px) rotate(-540deg);
216+
opacity: 0;
217+
}
218+
}
219+
220+
@keyframes spiral5 {
221+
0% {
222+
transform: rotate(240deg) translateX(270px) rotate(-240deg);
223+
opacity: 1;
224+
}
225+
100% {
226+
transform: rotate(600deg) translateX(0px) rotate(-600deg);
227+
opacity: 0;
228+
}
229+
}
230+
231+
@keyframes spiral6 {
232+
0% {
233+
transform: rotate(300deg) translateX(265px) rotate(-300deg);
234+
opacity: 1;
235+
}
236+
100% {
237+
transform: rotate(660deg) translateX(0px) rotate(-660deg);
238+
opacity: 0;
239+
}
240+
}
241+
242+
.title {
243+
position: absolute;
244+
top: 30px;
245+
left: 50%;
246+
transform: translateX(-50%);
247+
color: rgba(255, 150, 50, 0.8);
248+
font-family: 'Courier New', monospace;
249+
font-size: 32px;
250+
letter-spacing: 8px;
251+
text-transform: uppercase;
252+
animation: flicker 3s ease-in-out infinite;
253+
text-shadow: 0 0 10px rgba(255, 150, 50, 0.5);
254+
}
255+
256+
@keyframes flicker {
257+
0%, 100% {
258+
opacity: 1;
259+
}
260+
50% {
261+
opacity: 0.7;
262+
}
263+
}

0 commit comments

Comments
 (0)