Skip to content

Commit 3c58ded

Browse files
Vortex1134Vortex1134
authored
added my own animation (#2971)
1 parent b8c1b51 commit 3c58ded

3 files changed

Lines changed: 178 additions & 0 deletions

File tree

‎Art/Vortex1134-circles/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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+
<title>Circle Animation</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div id="outside-circle"></div>
11+
<div class="center-circles-wrapper">
12+
<div class="white one"></div>
13+
<div class="black two"></div>
14+
<div class="white three"></div>
15+
<div class="black four"></div>
16+
<div class="white five"></div>
17+
<div class="black six"></div>
18+
<div class="white seven"></div>
19+
<div class="black eight"></div>
20+
<div class="white nine"></div>
21+
</div>
22+
</body>
23+
</html>

‎Art/Vortex1134-circles/meta.json‎

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

‎Art/Vortex1134-circles/styles.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
padding: 5vw;
9+
height: 100vh;
10+
background: #222;
11+
overflow: hidden;
12+
}
13+
14+
#outside-circle {
15+
position: absolute;
16+
width: 10vw;
17+
height: 10vw;
18+
background: red;
19+
border-radius: 50%;
20+
animation: go-around 8s linear infinite;
21+
}
22+
23+
@keyframes go-around {
24+
0%, 100% {
25+
transform: translate(0, 0);
26+
}
27+
25% {
28+
transform: translate(calc(100vw - 20vw), 0);
29+
}
30+
50% {
31+
transform: translate(calc(100vw - 20vw), calc(100vh - 20vh));
32+
}
33+
75% {
34+
transform: translate(0, calc(100vh - 20vh));
35+
}
36+
}
37+
38+
.center-circles-wrapper {
39+
position: absolute;
40+
width: 50vw;
41+
height: 50vw;
42+
top: 50%;
43+
left: 50%;
44+
transform: translate(-50%, -50%);
45+
background-color: gray;
46+
border-radius: 40%;
47+
animation: linear 30s infinite color-change;
48+
}
49+
50+
.center-circles-wrapper > div {
51+
width: 10vw;
52+
height: 20vw;
53+
position: absolute;
54+
top: calc(50% - 10vw);
55+
left: calc(50% - 5vw);
56+
transform: translate(-50%, -50%);
57+
border-radius: 50%;
58+
animation: linear 5s infinite rotate;
59+
60+
}
61+
62+
.white {
63+
background-color: white;
64+
}
65+
66+
.black {
67+
background-color: black;
68+
}
69+
70+
.one {
71+
rotate: 20deg;
72+
}
73+
74+
.two {
75+
rotate: 40deg;
76+
}
77+
78+
.three {
79+
rotate: 60deg;
80+
}
81+
82+
.four {
83+
rotate: 80deg;
84+
}
85+
86+
.five {
87+
rotate: 100deg;
88+
}
89+
90+
.six {
91+
rotate: 120deg;
92+
}
93+
94+
.seven {
95+
rotate: 140deg;
96+
}
97+
98+
.eight {
99+
rotate: 160deg;
100+
}
101+
102+
@keyframes rotate {
103+
0% {
104+
transform: rotate(0deg);
105+
}
106+
100% {
107+
transform: rotate(360deg);
108+
}
109+
}
110+
111+
@keyframes color-change {
112+
0%, 100% {
113+
background-color: gray;
114+
}
115+
116+
10% {
117+
background-color: red;
118+
}
119+
120+
20% {
121+
background-color: orange;
122+
}
123+
124+
30% {
125+
background-color: yellow;
126+
}
127+
128+
40% {
129+
background-color: green;
130+
}
131+
132+
50% {
133+
background-color: blue;
134+
}
135+
136+
60% {
137+
background-color: indigo;
138+
}
139+
140+
70% {
141+
background-color: violet;
142+
}
143+
144+
80% {
145+
background-color: dodgerblue;
146+
}
147+
148+
90% {
149+
background-color: white;
150+
}
151+
}

0 commit comments

Comments
 (0)