Блог

Я пытаюсь повернуть шар внутри полумесяца, используя html и css. Вот ссылка на мой codepen

https://codepen.io/webdeveloper1213/pen/NWrWBQW а вот и мой код…

пожалуйста, помогите мне повернуть шар внутри полумесяца.Прямо сейчас он находится в самом верхнем положении полумесяца.

Спасибо.

HTML

<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);
            }
        }
  

 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%;
}

.circle {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 20px;
  animation: rotate 1s linear infinite;
  transform-origin: 75px 75px;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

  

Вы можете посмотреть значение поворота для свойства transform.