только пограничный переход при наведении на 90 градусов вокруг

Question

введите описание изображения здесь

скажите, пожалуйста, кому-нибудь на изображении выше, когда курсор на нем наводит курсор на автоматическое вращение границы только на изображении выше, возможно ли css, если возможно, дайте код, пожалуйста

Answer 1

Вы можете сделать это с анимацией при наведении на элемент.

Вы можете увидеть пример здесь, это та же идея.

Пример: - https://www.w3schools.com/howto/howto_css_loader.asp

Answer 2

Вы можете добиться желаемого эффекта следующим образом:

*,
*::after {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-image: url(//unsplash.it/400/400);
  background-repeat: no-repeat;
  background-size: cover;
  border: 15px solid lightgrey;
}

.circle::after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 15px solid lightgrey;
  border-right: 15px solid steelblue;
}

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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