Разработка - Анимированный checkbox

Разработка Анимированный checkbox

DetectorDevil 6 Ноя 2024 6 Ноя 2024

Бесплатные Есть обсуждение

Скачивания1

Просмотры119

Оценки0 (0)

Обновление6 Ноя 2024

Пишем код HTML:

HTML:

<div class="checkyborder ischecked">
  <input checked="" class="checky" type="checkbox" />
</div>

Пишем наш стиль:

CSS:

html,
body {
  background-color: #111;
  color: #fff;
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
}
.checkyborder {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.ischecked {
  background: conic-gradient(from var(--angle), #00bfff 1%, #800080 40%, #ff69b4 65%, #00f 80%, #00bfff 85% /* Sky Blue */);
}
.checky {
  width: 80px;
  height: 80px;
  appearance: none;
  border-radius: 100%;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  display: flex;
  background: #111;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.checky:checked:after {
  content: '\2714';
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
  color: #87ceeb;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 52px;
}

Пишем код js:

JavaScript:

let chk = document.querySelector('.checky');
let bdr = document.querySelector('.checkyborder');

function startAnimation() {
  let angle = 0;

  function animate() {
    angle = (angle + 1) % 360;
    bdr.style.setProperty('--angle', `${angle}deg`);
    requestAnimationFrame(animate);
  }

  animate();
}

window.addEventListener('load', function() {
  if (chk.checked) {
    startAnimation();
  }
});

chk.addEventListener('click', function() {
    bdr.classList.toggle('ischecked');
  if (chk.checked) {
        startAnimation();
  } else {
    bdr.classList.remove('ischecked');
  }
});

Получаем следующий результат:

Реакции: KaMI

Разработка Анимированный checkbox

Описание ресурса

Похожие ресурсы

Юридическое уведомление