Skip to content

Commit 6ed6555

Browse files
KarenCasallaskaren.c
KarenCasallas
and
karen.c
authored
KarenCasallas-spiral (#2941)
Co-authored-by: karen.c <¨[email protected]¨>
1 parent 5e9cb61 commit 6ed6555

File tree

3 files changed

+120
-0
lines changed

3 files changed

+120
-0
lines changed

‎Art/KarenCasallas-spiral/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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 rel="stylesheet" href="styles.css" />
7+
<title>Spiral Animation</title>
8+
</head>
9+
<body>
10+
<div class="spin">
11+
<div class="circle reverse"></div>
12+
<div class="circle"></div>
13+
</div>
14+
</body>
15+
</html>

‎Art/KarenCasallas-spiral/meta.json‎

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

‎Art/KarenCasallas-spiral/styles.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background-color: #faf8f2;
8+
font-family: Arial, sans-serif;
9+
}
10+
11+
.spin{
12+
position: relative;
13+
width: 600px;
14+
}
15+
16+
.circle {
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
transform: translate(-50%, -50%) rotate(0deg);
21+
border-radius: 50%;
22+
background: conic-gradient(
23+
red 0deg 7.5deg,
24+
white 7.5deg 15deg,
25+
red 15deg 22.5deg,
26+
white 22.5deg 30deg,
27+
red 30deg 37.5deg,
28+
white 37.5deg 45deg,
29+
red 45deg 52.5deg,
30+
white 52.5deg 60deg,
31+
red 60deg 67.5deg,
32+
white 67.5deg 75deg,
33+
red 75deg 82.5deg,
34+
white 82.5deg 90deg,
35+
red 90deg 97.5deg,
36+
white 97.5deg 105deg,
37+
red 105deg 112.5deg,
38+
white 112.5deg 120deg,
39+
red 120deg 127.5deg,
40+
white 127.5deg 135deg,
41+
red 135deg 142.5deg,
42+
white 142.5deg 150deg,
43+
red 150deg 157.5deg,
44+
white 157.5deg 165deg,
45+
red 165deg 172.5deg,
46+
white 172.5deg 180deg,
47+
red 180deg 187.5deg,
48+
white 187.5deg 195deg,
49+
red 195deg 202.5deg,
50+
white 202.5deg 210deg,
51+
red 210deg 217.5deg,
52+
white 217.5deg 225deg,
53+
red 225deg 232.5deg,
54+
white 232.5deg 240deg,
55+
red 240deg 247.5deg,
56+
white 247.5deg 255deg,
57+
red 255deg 262.5deg,
58+
white 262.5deg 270deg,
59+
red 270deg 277.5deg,
60+
white 277.5deg 285deg,
61+
red 285deg 292.5deg,
62+
white 292.5deg 300deg,
63+
red 300deg 307.5deg,
64+
white 307.5deg 315deg,
65+
red 315deg 322.5deg,
66+
white 322.5deg 330deg,
67+
red 330deg 337.5deg,
68+
white 337.5deg 345deg,
69+
red 345deg 352.5deg,
70+
white 352.5deg 360deg
71+
);
72+
}
73+
74+
.circle {
75+
width: 200px;
76+
height: 200px;
77+
animation: spinRigth 6s linear infinite;
78+
}
79+
.reverse {
80+
width: 600px;
81+
height: 600px;
82+
animation: spinLeft 6s linear infinite;
83+
}
84+
85+
@keyframes spinLeft {
86+
from {
87+
transform: translate(-50%, -50%) rotate(0deg);
88+
}
89+
to {
90+
transform: translate(-50%, -50%) rotate(360deg);
91+
}
92+
}
93+
94+
@keyframes spinRigth {
95+
from {
96+
transform: translate(-50%, -50%) rotate(0deg);
97+
}
98+
to {
99+
transform: translate(-50%, -50%) rotate(-360deg);
100+
}
101+
}

0 commit comments

Comments
 (0)