Круг с радиусом вращения

Я хотел бы создать анимацию с использованием CSS и HTML (при необходимости JavaScript). Но я не знаю, как это сделать.

Мне нужно создать круг, и ось радиуса должна медленно вращаться внутри круга.

Как бы это сделать?

CSS-анимация , CSS-преобразования , радиус границы

— 14.09.2022 19:14

javascript html css

14.09.2022 18:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Рисование SVG может быть самым простым способом получить форму. Затем используйте CSS-анимацию, чтобы вращать весь SVG.

@keyframes rotate {
  to { rotate: 360deg }
}

svg {
  animation: rotate 10s linear infinite;
  width: 150px;
  height: 150px;
}

svg .ring {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

svg .dot {
  fill: black;
}

svg .line {
  stroke: purple;
  stroke-width: 1px;
}

svg .text {
  font-size: 10px;
  fill: purple;
}

<svg viewBox = "0 0 100 100">
  <circle class = "ring" r = "49" cx = "50" cy = "50" />
  <circle class = "dot" r = "2" cx = "50" cy = "50" />
  <line class = "line" x1 = "50" y1 = "50" x2 = "99" y2 = "50" />
  <text class = "text" x = "60" y = "47">Radius</text>
</svg>

14.09.2022 19:25

создание родителя .circle с четырьмя div и предоставление родителю display:grid из 2x2.Добавление верхней границы 4-го div дает нам строку, а текст радиуса находится во 2-м div. сдвинутый вниз с прокладкой сверху.

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .circle {
        width: 300px;
        height: 300px;
        border-radius: 100%;
        border: solid 1px black;
        display: grid;
        align-content: center;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        animation: rotate 5s infinite linear;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }

    }

    div {
        width: 150px;
        height: 150px;

    }

    div:nth-child(2) {
        padding-top: 89%;
    }

    div:nth-child(4) {
        border-top: solid 2px red;
    }

<div class = "circle">
        <div></div>
        <div>Radius</div>
        <div></div>
        <div></div>
</div>

14.09.2022 19:29

Я бы использовал SVG и AnimateTransform для поворота линии.

AnimateTransform может вращать объект вокруг точки, поэтому в этом случае просто начните с линии под любым углом, который вам нужен, но привяжите вращение к центру круга.

<svg viewBox='0 0 100 100' xmlns = "http://www.w3.org/2000/svg">
  <circle fill='transparent' stroke='black' cx='50' cy='50' r='35' /> 
  <line stroke='red' x1='50' x2='85' y1='50' y2='50'>
    <animateTransform
       attributeName='transform'
       from='0 50 50'
       to='360 50 50'
       dur='1.5s'
       repeatCount='indefinite'
       attributeType='xml'
       type='rotate' />
  </line>
</svg>

Не требуется CSS или JavaScript.

14.09.2022 21:19