Skip to content

Commit 3d61254

Browse files
udeshvirkLaurelineP
udeshvirk
and
LaurelineP
authored
Rotate Ball in circle animation (#2944)
Co-authored-by: Laureline Paris <[email protected]>
1 parent b64e522 commit 3d61254

File tree

3 files changed

+107
-0
lines changed

3 files changed

+107
-0
lines changed

‎Art/udeshvirk-rotating-ball/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>Rotating Ball In Circle</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="box">
11+
<div class="circle">
12+
<div class="rotator">
13+
<div class="ball"></div>
14+
</div>
15+
</div>
16+
</div>
17+
<div class="box">
18+
<div class="circle">
19+
<div class="ball ball-2"></div>
20+
</div>
21+
</div>
22+
</body>
23+
</html>

‎Art/udeshvirk-rotating-ball/meta.json

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

‎Art/udeshvirk-rotating-ball/styles.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body{
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
width: 100vw;
12+
gap: 20px;
13+
}
14+
.box{
15+
width: 200px;
16+
height: 200px;
17+
border: 2px solid #666;
18+
}
19+
.circle{
20+
width: 100%;
21+
height: 100%;
22+
border-radius: 50%;
23+
border: 2px solid #000;
24+
position: relative;
25+
}
26+
.rotator{
27+
width: 100%;
28+
height: 100%;
29+
display: flex;
30+
justify-content: center;
31+
align-items: flex-start;
32+
animation: rotate 2s linear infinite;
33+
}
34+
.ball{
35+
width: 20px;
36+
height: 20px;
37+
border-radius: 50%;
38+
background-color: red;
39+
}
40+
.ball-2{
41+
position: absolute;
42+
background-color: green;
43+
animation: moveQuarter 2s linear infinite;
44+
}
45+
@keyframes rotate{
46+
0%{
47+
transform: rotate(0deg);
48+
}
49+
100%{
50+
transform: rotate(360deg);
51+
}
52+
}
53+
54+
@keyframes moveQuarter {
55+
0% {
56+
top: 0%;
57+
left: 50%;
58+
transform: translate(-50%, 0%);
59+
}
60+
25% {
61+
top: 50%;
62+
left: 100%;
63+
transform: translate(-100%, -50%);
64+
}
65+
50% {
66+
top: 100%;
67+
left: 50%;
68+
transform: translate(-50%, -100%);
69+
}
70+
75% {
71+
top: 50%;
72+
left: 0%;
73+
transform: translate(0%, -50%);
74+
}
75+
100% {
76+
top: 0%;
77+
left: 50%;
78+
transform: translate(-50%, 0%);
79+
}
80+
}

0 commit comments

Comments
 (0)