Нужна помощь в создании вращающихся элементов и выделенных/не выделенных элементов с использованием HTML, CSS и Javascri ⇐ Html

[Anonymous]

Я пытаюсь создать элемент, подобный этому:

Видео, демонстрирующее эту идею в действии.
В новой версии цвет фона активного элемента может быть #d36202.
Если кто-нибудь может помочь, я был бы очень признателен.
У меня есть следующий фрагмент кода, но, похоже, это совершенно неправильная идея.

Код: Выделить всё

Licensed/
Insured
Warranty
(5 years+)
Free
Quote


/* Layout */
.rotor {
position: relative;
width: 200px;
height: 400px;
margin: 0 auto;
transform: translateZ(0);
}

/* Circle items positioned around a ring */
.circle {
--r: 150px; /* ring radius */
position: absolute;
text-align:center;
inset: 50%;
width: 100px;
height: 85px;
margin: calc(-1 * 28px);
border-radius: 50%;
display: grid;
place-items: center;
text-decoration: none;
color: white;
background: rgba(0, 0, 0, 0.698);
transition: transform .3s ease, box-shadow .2s;
box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Place items with nth-child (3 items example) */
.circle:nth-child(1){ transform: rotate( -60deg ) translate(var(--r)) rotate(60deg); }
.circle:nth-child(2){ transform: rotate(  60deg ) translate(var(--r)) rotate(-60deg); }
.circle:nth-child(3){ transform: rotate( 180deg ) translate(var(--r)) rotate(-180deg); }

/* Active state */
.circle.active {
background-color: #f49c05;
box-shadow: 0 10px 30px rgba(175,0,45,.35);
color:black;
transform: scale(1.5) translateZ(0);
}

/* Continuous rotation of the whole ring */
.rotor {
animation: spin 12s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.rotor { animation: none; }
}

/* Small responsive tweak */
@media (max-width:420px) {
.rotor { width: 160px; height:160px; }
.circle { width:44px; height:44px; margin:-22px; }
}



/* Simple logic to set active based on URL or clicks */
(function(){
const items = document.querySelectorAll('.rotor .circle');
// mark active by path
const path = location.pathname.replace(/\/$/,'');
items.forEach(a=>{
a.classList.toggle('active', a.getAttribute('href') === path);
// click handler to set active immediately (and allow SPA nav)
a.addEventListener('click', e=>{
items.forEach(i=>i.classList.remove('active'));
e.currentTarget.classList.add('active');
});
});
})();

Мне очень хочется, чтобы он вращался при первом просмотре. Похоже, что это делает элемент активным только при щелчке, а я действительно хочу, чтобы он автоматически менял активный элемент, как в примере видео.
Я хочу иметь возможность использовать внедрение кода для всего элемента, если это возможно.

Подробнее здесь: https://stackoverflow.com/questions/798 ... lements-us