0

Есть div, к которому применен стиль border-radius, див круглый.

Как сделать так, чтобы при наведении на него указателя, у него обводился плавно контур по часовой стрелке?

1 ответ 1

3

Один из способов, поместить внутрь блока отрисованный в 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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