悬停在90度左右时只有边界过渡

Question

enter image description here

请告诉我上方图像中的任何人，当光标停留在上方图像时才自动旋转边框，如果可能，请通过css给出代码

Answer 1

您可以这样实现所需的效果：

*,
*::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>

Answer 2

当鼠标悬停元素时，您可以使用动画来做到这一点。

您可以在此处看到与示例相同的示例。

示例：-https://www.w3schools.com/howto/howto_css_loader.asp