6

Как сделать анимацию вращения круга svg при ховере?
введите сюда описание изображения

Т.е. на изображении svg в обычном состоянии. А при наведении курсора нужно, чтобы цвет крутился по кругу, как змейка. Можно, чтобы не полный круг был

2 ответа 2

11

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.circle {
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: #f00 dotted 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -80px 0 0 -80px;
}

.circle:hover {
  animation: spin 2s infinite linear;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
<div class="circle"></div>

3
  • Я svg'шный ответ запостил :)
    – Qwertiy
    21 июл 2017 в 21:00
  • @Qwertiy Думаю, для автора была важнее сама анимация, но все равно +)
    – Cheg
    21 июл 2017 в 21:08
  • Ага, согласен :) Но я там ещё фишку с паузой прикрутил.
    – Qwertiy
    21 июл 2017 в 21:10
2

Раз уж в вопросе svg:

html, body, svg {
  height: 100%;
  margin: auto;
  display: block;
}

circle {
  fill: none;
  stroke: red;
  stroke-width: 3px;
  stroke-dasharray: 3;
  animation: roll .25s linear infinite;
  animation-play-state: paused;
  pointer-events: visible;
}

circle:hover {
  animation-play-state: running;
}

@keyframes roll {
  from { stroke-dashoffset:  0 }
  to   { stroke-dashoffset: -6 }
}
<svg viewBox="-128 -128 256 256">
  <circle r="120" />
</svg>

Ваш ответ

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

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