Skip to content

Commit f9ffe46

Browse files
actions-useractions-user
committed
(CI) Run Prettier
1 parent f6519c8 commit f9ffe46

2 files changed

Lines changed: 99 additions & 50 deletions

File tree

‎Art/atef5-in-Cosmic-Swirl/index.html‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<title>Cosmic Swirl – atef5-in</title>
6-
<link rel="stylesheet" href="styles.css" />
7-
</head>
8-
<body>
9-
<div class="swirl">
10-
<!-- generate multiple dots -->
11-
<div></div><div></div><div></div><div></div><div></div>
12-
<div></div><div></div><div></div><div></div><div></div>
13-
</div>
14-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Cosmic Swirl – atef5-in</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<div class="swirl">
10+
<!-- generate multiple dots -->
11+
<div></div>
12+
<div></div>
13+
<div></div>
14+
<div></div>
15+
<div></div>
16+
<div></div>
17+
<div></div>
18+
<div></div>
19+
<div></div>
20+
<div></div>
21+
</div>
22+
</body>
1523
</html>

‎Art/atef5-in-Cosmic-Swirl/styles.css‎

Lines changed: 79 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,97 @@
11
body {
2-
margin:0;
3-
height:100vh;
4-
display:flex;
5-
justify-content:center;
6-
align-items:center;
7-
background:#000;
8-
overflow:hidden;
9-
font-family:sans-serif;
2+
margin: 0;
3+
height: 100vh;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
background: #000;
8+
overflow: hidden;
9+
font-family: sans-serif;
1010
}
1111

1212
.swirl {
13-
position:relative;
14-
width:400px;
15-
height:400px;
13+
position: relative;
14+
width: 400px;
15+
height: 400px;
1616
}
1717

1818
.swirl div {
19-
position:absolute;
20-
top:50%;
21-
left:50%;
22-
width:20px;
23-
height:20px;
24-
background:#fff;
25-
border-radius:50%;
19+
position: absolute;
20+
top: 50%;
21+
left: 50%;
22+
width: 20px;
23+
height: 20px;
24+
background: #fff;
25+
border-radius: 50%;
2626
/* color added per child */
27-
transform-origin:-200px 0;
27+
transform-origin: -200px 0;
2828
animation: orbit 4s linear infinite alternate;
2929
}
3030

3131
/* color and delay variations */
32-
.swirl div:nth-child(odd) { animation-duration:3s; }
33-
.swirl div:nth-child(even) { animation-duration:5s; }
34-
.swirl div:nth-child(1) { animation-delay:0s; box-shadow:0 0 15px 3px #ff3; }
35-
.swirl div:nth-child(2) { animation-delay:0.2s; box-shadow:0 0 15px 3px #3ff; }
36-
.swirl div:nth-child(3) { animation-delay:0.4s; box-shadow:0 0 15px 3px #f3f; }
37-
.swirl div:nth-child(4) { animation-delay:0.6s; box-shadow:0 0 15px 3px #3f3; }
38-
.swirl div:nth-child(5) { animation-delay:0.8s; box-shadow:0 0 15px 3px #ff6; }
39-
.swirl div:nth-child(6) { animation-delay:1s; box-shadow:0 0 15px 3px #6ff; }
40-
.swirl div:nth-child(7) { animation-delay:1.2s; box-shadow:0 0 15px 3px #f66; }
41-
.swirl div:nth-child(8) { animation-delay:1.4s; box-shadow:0 0 15px 3px #66f; }
42-
.swirl div:nth-child(9) { animation-delay:1.6s; box-shadow:0 0 15px 3px #c3f; }
43-
.swirl div:nth-child(10){ animation-delay:1.8s; box-shadow:0 0 15px 3px #3c3; }
32+
.swirl div:nth-child(odd) {
33+
animation-duration: 3s;
34+
}
35+
.swirl div:nth-child(even) {
36+
animation-duration: 5s;
37+
}
38+
.swirl div:nth-child(1) {
39+
animation-delay: 0s;
40+
box-shadow: 0 0 15px 3px #ff3;
41+
}
42+
.swirl div:nth-child(2) {
43+
animation-delay: 0.2s;
44+
box-shadow: 0 0 15px 3px #3ff;
45+
}
46+
.swirl div:nth-child(3) {
47+
animation-delay: 0.4s;
48+
box-shadow: 0 0 15px 3px #f3f;
49+
}
50+
.swirl div:nth-child(4) {
51+
animation-delay: 0.6s;
52+
box-shadow: 0 0 15px 3px #3f3;
53+
}
54+
.swirl div:nth-child(5) {
55+
animation-delay: 0.8s;
56+
box-shadow: 0 0 15px 3px #ff6;
57+
}
58+
.swirl div:nth-child(6) {
59+
animation-delay: 1s;
60+
box-shadow: 0 0 15px 3px #6ff;
61+
}
62+
.swirl div:nth-child(7) {
63+
animation-delay: 1.2s;
64+
box-shadow: 0 0 15px 3px #f66;
65+
}
66+
.swirl div:nth-child(8) {
67+
animation-delay: 1.4s;
68+
box-shadow: 0 0 15px 3px #66f;
69+
}
70+
.swirl div:nth-child(9) {
71+
animation-delay: 1.6s;
72+
box-shadow: 0 0 15px 3px #c3f;
73+
}
74+
.swirl div:nth-child(10) {
75+
animation-delay: 1.8s;
76+
box-shadow: 0 0 15px 3px #3c3;
77+
}
4478

4579
@keyframes orbit {
46-
from { transform:rotate(0deg) translateX(200px) rotate(0deg); }
47-
to { transform:rotate(360deg) translateX(200px) rotate(-360deg); }
80+
from {
81+
transform: rotate(0deg) translateX(200px) rotate(0deg);
82+
}
83+
to {
84+
transform: rotate(360deg) translateX(200px) rotate(-360deg);
85+
}
4886
}
4987

5088
.credit {
51-
position:absolute;
52-
bottom:10px;
53-
font-size:0.8rem;
54-
color:#fff;
89+
position: absolute;
90+
bottom: 10px;
91+
font-size: 0.8rem;
92+
color: #fff;
93+
}
94+
.credit a {
95+
color: #fff;
96+
text-decoration: none;
5597
}
56-
.credit a { color:#fff; text-decoration:none; }

0 commit comments

Comments
 (0)