Закрашивание границы объекта по часовой стрелке с помощью css

#css #css3 #анимация #css_animation

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

Ответы

Ответ 1

Пример



* {
  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;
  }
}