Как создать вращающийся полукруг вокруг текста

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть полукруг в центре моей страницы, который я хочу иметь возможность вращать, я могу сделать какую-то его часть, отрегулировав ширину, но мне нужен способ заставить его вращаться на 360 градусов. Если возможно, я хочу иметь возможность выполнить это, используя только css, однако, если требуется, я не возражаю против ванильного js (без Jquery).

 body {
  background-color: lightblue;
}

#txt {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  top: 40%;
  font-size: 30px;
  color: white;
}

#spinCircle {
  position: fixed;
  left: 50%;
  top: 15%;
  height: 50vh;
  width: 50px;
  border-radius: 0 150px 150px 0;
  border-color: black;
  color: black;
  border-style: solid;
  border-left-style: none;
  /*background-color: black;*/
  animation: spinning infinite;
  animation-duration: 3s;
}

@keyframes spinning {
  from {
    width: 50px
  }
  to {
    width: 0px;
    z-index: -5;
  }
}

 <div id="txt">Hello</div>
<div id="spinCircle" />

Развернуть фрагмент

Ответ №1:

Это то, что вы хотите?

 body {
  background-color: lightblue;
}

#txt {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  top: 40%;
  font-size: 30px;
  color: white;
}

#spinCircle {
  position: fixed;
  left: 50%;
  top: 15%;
  height: 50vh;
  width: 50px;
  border-radius: 0 150px 150px 0;
  border-color: black;
  color: black;
  border-style: solid;
  border-left-style: none;
  transform-origin: left;
  /*background-color: black;*/
  animation: spinning infinite;
  animation-duration: 3s;
}

@keyframes spinning {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
    z-index: -5;
  }
}

 <div id="txt">Hello</div>
<div id="spinCircle" />

Развернуть фрагмент

1. Спасибо за ваш ответ, это почти то, что мне нужно, я хочу, чтобы полукруг был на 360 градусов, что означает, что строка также должна находиться перед текстом. Также, похоже, в этой анимации есть один момент, когда строка становится невидимой (сзади) Я хочу, чтобы в этой точке появлялась прямая линия, иначе она не выглядит такой гладкой.

Ответ №2:

Если я правильно понимаю, вы хотите, чтобы полукруг вращался вокруг вашего текста «привет». Если это так, вы можете использовать transform: rotateY() стиль для вращения своего круга. Если вы сделаете это, вы можете добавить свою ширину к окружности div, а также установить начало преобразования как левую сторону вашего элемента, чтобы вы вращались вокруг левой стороны вашего полукруга, а не центра:

 transform-origin: left;
 width: 50px;

Смотрите пример ниже:

 body {
  background-color: lightblue;
}

#txt {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  top: 40%;
  font-size: 30px;
  color: white;
}

#spinCircle {
  position: fixed;
  left: 50%;
  top: 15%;
  height: 50vh;
  width: 200px;
  border-radius: 0 150px 150px 0;
  border-color: black;
  color: black;
  border-style: solid;
  border-left-style: none;
  animation: spinning linear infinite;
  animation-duration: 3s;
  transform-origin: left;
  width: 50px;
}

@keyframes spinning {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

 <div id="txt">Hello</div>
<div id="spinCircle" />

Развернуть фрагмент

1. Спасибо за ваш ответ, это почти то, что мне нужно, я хочу, чтобы полукруг был на 360 градусов, что означает, что строка также должна находиться перед текстом. Также, похоже, в этой анимации есть один момент, когда строка становится невидимой (сзади) Я хочу, чтобы в этой точке появлялась прямая линия, иначе она не выглядит такой гладкой.