I have been working on a project to animate a ball inside a crescent shape using HTML and CSS. You can check out my codepen here. However, I am facing an issue where the ball is currently stuck at the top of the crescent.
I would greatly appreciate any assistance in getting the ball to rotate properly within the crescent space. Thank you!
Below is the snippet of my HTML code:
<div class="line"><div class="circle"></div></div>
body {
background-color: #272727;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.line {
position: relative;
width: 200px;
height: 200px;
border-bottom: 4px solid #fff;
border-radius: 50%;
animation: linerotate 2s linear infinite;
}
.circle {
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left:0;
top:70px;
}
@keyframes rotate {
0% {
left:0;
transform: rotate(0deg);
}
50% {
left: calc(100% - 50px);
transform: rotate(45deg);
}
100% {
top:0;
left: 0;
transform: rotate(0deg);
}
}
@keyframes linerotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(45deg);
}
100% {
transform: rotate(0);
}
}