Есть div, к которому применен стиль border-radius
, див круглый.
Как сделать так, чтобы при наведении на него указателя, у него обводился плавно контур по часовой стрелке?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуОдин из способов, поместить внутрь блока отрисованный в svg круг и изменять с помощью @keyframes смещение пунктира (обводки) (Stroke-dashoffset), предварительно задав длину каждой линии, которая будет разделена равным ей пробелом (Stroke-dasharray).
Подробнее об этом можно почитать тут: https://css-tricks.com/svg-line-animation-works/
svg {
overflow: inherit;
position: absolute;
left: 0;
top: 0;
}
.wrapper {
width: 250px;
height: 250px;
border-radius: 50%;
position: relative;
cursor: pointer;
text-align: center;
line-height: 250px;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.wrapper:hover .path {
-webkit-animation: dash 1.2s 1 linear;
animation: dash 1.2s 1 linear;
-webkit-animation-fill-mode:forwards;
}
<div class="wrapper">
<p>Текст внутри дива</p>
<svg width="252px" height="252px" viewBox="0 0 255 250" >
<circle class="path" fill="none" stroke="#000000" stroke-width="6" cx="125" cy="125" r="124"></circle>
</svg>
</div>