Анимация вращения svg

376

22 июля 2017, 06:45

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

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

Answer 1

.circle { 
  width: 205px; 
  height: 205px; 
  border-radius: 100%; 
  border: #f00 dotted 4px; 
} 
 
.circle:hover { 
  animation: spin 1s infinite linear; 
} 
 
@keyframes spin { 
  100% { 
    transform: rotate(360deg); 
  } 
}

<div class="circle"></div>

Answer 2

.circle:hover {
    animation-name: spin;
    animation-duration: 600ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

animation-duration - это время анимации в миллисекундах, можно выставить infinite - бесконечно

Answer 3

Раз уж в вопросе 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>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Странная форма написание стилей

Я однажды видел в CSS, что писали стили примерно так:

190

MySQL

Access denied for user 'root'@'localhost' (using password: YES)

В общем запустил Open Server, в логах MySQL флудит вот такой строкой:

304

MySQL

Коннект Django с существующей БД mysql

Подскажите, привязал django проект к уже заполненой данными бд mysqlВопрос по моделям, если у меня имеется в бд таблица Sales и я создам модель Sales,...

265

MySQL

Корректная группировка

Есть запрос, который выводит часы и среднее время обработки заказа за каждый час

184