Как сделать анимацию вращения круга svg
при ховере?
Т.е. на изображении svg
в обычном состоянии. А при наведении курсора нужно, чтобы цвет крутился по кругу, как змейка. Можно, чтобы не полный круг был
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу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>
Раз уж в вопросе 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>