4

Где-то здесь я раньше видел следующее решение анимации на чистом css: при наведении на какой-либо объект, граница этого объекта border с радиусом 100% закрашивалась по часовой стрелке.

0

1 ответ 1

8

Пример

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

.circle {
  position: relative;
  width: 200px;
  height: 200px;
  background: #ccc;
  border-radius: 100%;
}

.circle__item {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
  overflow: hidden;
  transform-origin: left center;
}

.circle:hover .circle__item {
  animation: anim1 6s 1;
  transform: rotate(180deg);
}

@keyframes anim1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  50.01% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.circle__half {
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 10px transparent;
  border-top-color: green;
  border-left-color: green;
  border-radius: 50%;
}

.circle__half--clipped {
  width: 200%;
  transform: rotate(-45deg);
}

.circle:hover .circle__half--clipped {
  transform: rotate(135deg);
  animation: anim2 3s linear 2;
}

@keyframes anim2 {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(135deg);
  }
}

.circle__half--fix {
  width: 100%;
  transform: rotate(135deg);
  opacity: 0;
}

.circle:hover .circle__half--fix {
  opacity: 1;
  animation: anim3 6s 1;
}

@keyframes anim3 {
  0% {
    opacity: 0;
  }
  49.99% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
<div class="circle">
  <div class="circle__item">
    <div class="circle__half circle__half--clipped"></div>
  </div>
  <div class="circle__half circle__half--fix">
  </div>
</div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.