Skip to content

Commit c934571

Browse files
actions-useractions-user
committed
(CI) Run Prettier
1 parent 2f7fc2a commit c934571

File tree

3 files changed

+112
-109
lines changed

3 files changed

+112
-109
lines changed

‎Art/jeffwiatt-GoldenStars/index.html

Lines changed: 71 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,73 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Star Animation</title>
6-
<link href="styles.css" rel="stylesheet">
7-
</head>
8-
<body>
9-
<div id="main">
10-
<div class="mainStar"></div>
11-
<div class="starOuter">
12-
<div class="starInner"></div>
13-
</div>
14-
<div class="starOuter" style="animation-delay: -.5s;">
15-
<div class="starInner" style="animation-delay: -.5s;"></div>
16-
</div>
17-
<div class="starOuter" style="animation-delay: -1s;">
18-
<div class="starInner" style="animation-delay: -1s;"></div>
19-
</div>
20-
<div class="starOuter" style="animation-delay: -1.5s;">
21-
<div class="starInner" style="animation-delay: -1.5s;"></div>
22-
</div>
23-
<div class="starOuter" style="animation-delay: -2s;">
24-
<div class="starInner" style="animation-delay: -2s;"></div>
25-
</div>
26-
<div class="starOuter" style="animation-delay: -2.5s;">
27-
<div class="starInner" style="animation-delay: -2.5s;"></div>
28-
</div>
29-
<div class="starOuter" style="animation-delay: -3s;">
30-
<div class="starInner" style="animation-delay: -3s;"></div>
31-
</div>
32-
<div class="starOuter" style="animation-delay: -3.5s;">
33-
<div class="starInner" style="animation-delay: -3.5s;"></div>
34-
</div>
35-
<div class="starOuter" style="animation-delay: -4s;">
36-
<div class="starInner" style="animation-delay: -4s;"></div>
37-
</div>
38-
<div class="starOuter" style="animation-delay: -4.5s;">
39-
<div class="starInner" style="animation-delay: -4.5s;"></div>
40-
</div>
41-
<div class="starOuter" style="animation-delay: -5s;">
42-
<div class="starInner" style="animation-delay: -5s;"></div>
43-
</div>
44-
<div class="starOuter" style="animation-delay: -5.5s;">
45-
<div class="starInner" style="animation-delay: -5.5s;"></div>
46-
</div>
47-
<div class="starOuter" style="animation-delay: -6s;">
48-
<div class="starInner" style="animation-delay: -6s;"></div>
49-
</div>
50-
<div class="starOuter" style="animation-delay: -6.5s;">
51-
<div class="starInner" style="animation-delay: -6.5s;"></div>
52-
</div>
53-
<div class="starOuter" style="animation-delay: -7s;">
54-
<div class="starInner" style="animation-delay: -7s;"></div>
55-
</div>
56-
<div class="starOuter" style="animation-delay: -7.5s;">
57-
<div class="starInner" style="animation-delay: -7.5s;"></div>
58-
</div>
59-
<div class="starOuter" style="animation-delay: -8s;">
60-
<div class="starInner" style="animation-delay: -8s;"></div>
61-
</div>
62-
<div class="starOuter" style="animation-delay: -8.5s;">
63-
<div class="starInner" style="animation-delay: -8.5s;"></div>
64-
</div>
65-
<div class="starOuter" style="animation-delay: -9s;">
66-
<div class="starInner" style="animation-delay: -9s;"></div>
67-
</div>
68-
<div class="starOuter" style="animation-delay: -9.5s;">
69-
<div class="starInner" style="animation-delay: -9.5s;"></div>
70-
</div>
71-
72-
</div>
73-
</body>
74-
</html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Star Animation</title>
6+
<link href="styles.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div id="main">
10+
<div class="mainStar"></div>
11+
<div class="starOuter">
12+
<div class="starInner"></div>
13+
</div>
14+
<div class="starOuter" style="animation-delay: -0.5s">
15+
<div class="starInner" style="animation-delay: -0.5s"></div>
16+
</div>
17+
<div class="starOuter" style="animation-delay: -1s">
18+
<div class="starInner" style="animation-delay: -1s"></div>
19+
</div>
20+
<div class="starOuter" style="animation-delay: -1.5s">
21+
<div class="starInner" style="animation-delay: -1.5s"></div>
22+
</div>
23+
<div class="starOuter" style="animation-delay: -2s">
24+
<div class="starInner" style="animation-delay: -2s"></div>
25+
</div>
26+
<div class="starOuter" style="animation-delay: -2.5s">
27+
<div class="starInner" style="animation-delay: -2.5s"></div>
28+
</div>
29+
<div class="starOuter" style="animation-delay: -3s">
30+
<div class="starInner" style="animation-delay: -3s"></div>
31+
</div>
32+
<div class="starOuter" style="animation-delay: -3.5s">
33+
<div class="starInner" style="animation-delay: -3.5s"></div>
34+
</div>
35+
<div class="starOuter" style="animation-delay: -4s">
36+
<div class="starInner" style="animation-delay: -4s"></div>
37+
</div>
38+
<div class="starOuter" style="animation-delay: -4.5s">
39+
<div class="starInner" style="animation-delay: -4.5s"></div>
40+
</div>
41+
<div class="starOuter" style="animation-delay: -5s">
42+
<div class="starInner" style="animation-delay: -5s"></div>
43+
</div>
44+
<div class="starOuter" style="animation-delay: -5.5s">
45+
<div class="starInner" style="animation-delay: -5.5s"></div>
46+
</div>
47+
<div class="starOuter" style="animation-delay: -6s">
48+
<div class="starInner" style="animation-delay: -6s"></div>
49+
</div>
50+
<div class="starOuter" style="animation-delay: -6.5s">
51+
<div class="starInner" style="animation-delay: -6.5s"></div>
52+
</div>
53+
<div class="starOuter" style="animation-delay: -7s">
54+
<div class="starInner" style="animation-delay: -7s"></div>
55+
</div>
56+
<div class="starOuter" style="animation-delay: -7.5s">
57+
<div class="starInner" style="animation-delay: -7.5s"></div>
58+
</div>
59+
<div class="starOuter" style="animation-delay: -8s">
60+
<div class="starInner" style="animation-delay: -8s"></div>
61+
</div>
62+
<div class="starOuter" style="animation-delay: -8.5s">
63+
<div class="starInner" style="animation-delay: -8.5s"></div>
64+
</div>
65+
<div class="starOuter" style="animation-delay: -9s">
66+
<div class="starInner" style="animation-delay: -9s"></div>
67+
</div>
68+
<div class="starOuter" style="animation-delay: -9.5s">
69+
<div class="starInner" style="animation-delay: -9.5s"></div>
70+
</div>
71+
</div>
72+
</body>
73+
</html>

‎Art/jeffwiatt-GoldenStars/meta.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"artName": "GoldenStars",
33
"githubHandle": "jeffwiatt"
4-
}
4+
}

‎Art/jeffwiatt-GoldenStars/styles.css

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,60 @@
11
body {
2-
background-color: #0f105e;
2+
background-color: #0f105e;
33
}
44

55
#main {
6-
position: absolute;
7-
width: 500px;
8-
height: 500px;
9-
top: 50%;
10-
left: 50%;
11-
transform: translate(-50%, -50%);
6+
position: absolute;
7+
width: 500px;
8+
height: 500px;
9+
top: 50%;
10+
left: 50%;
11+
transform: translate(-50%, -50%);
1212
}
1313

1414
.mainStar {
15-
position: absolute;
16-
top: 150px;
17-
left: 150px;
18-
width: 200px;
19-
height: 200px;
20-
aspect-ratio: 1;
21-
background: #F8CA00;
22-
clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%);
23-
transform-origin: 50% 50%;
24-
animation: spin-right 10s infinite linear;
15+
position: absolute;
16+
top: 150px;
17+
left: 150px;
18+
width: 200px;
19+
height: 200px;
20+
aspect-ratio: 1;
21+
background: #f8ca00;
22+
clip-path: polygon(50% 0, 79% 90%, 2% 35%, 98% 35%, 21% 90%);
23+
transform-origin: 50% 50%;
24+
animation: spin-right 10s infinite linear;
2525
}
2626

2727
.starOuter {
28-
position: absolute;
29-
left: 225px;
30-
top: 0;
31-
width: 50px;
32-
height: 50px;
33-
transform-origin: 25px 250px;
34-
animation: spin-left 10s infinite linear;
28+
position: absolute;
29+
left: 225px;
30+
top: 0;
31+
width: 50px;
32+
height: 50px;
33+
transform-origin: 25px 250px;
34+
animation: spin-left 10s infinite linear;
3535
}
3636

3737
.starInner {
38-
position: absolute;
39-
top: 0;
40-
left: 0;
41-
width: 50px;
42-
height: 50px;
43-
aspect-ratio: 1;
44-
background: #F8CA00;
45-
clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%);
46-
transform-origin: 50% 50%;
47-
animation: spin-right 10s infinite linear;
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: 50px;
42+
height: 50px;
43+
aspect-ratio: 1;
44+
background: #f8ca00;
45+
clip-path: polygon(50% 0, 79% 90%, 2% 35%, 98% 35%, 21% 90%);
46+
transform-origin: 50% 50%;
47+
animation: spin-right 10s infinite linear;
4848
}
4949

5050
@keyframes spin-right {
51-
100% { transform: rotateZ( -360deg); }
51+
100% {
52+
transform: rotateZ(-360deg);
53+
}
5254
}
5355

5456
@keyframes spin-left {
55-
100% { transform: rotateZ( 360deg); }
57+
100% {
58+
transform: rotateZ(360deg);
59+
}
5660
}

0 commit comments

Comments
 (0)