圆形边框中的悬停效果

Question

谁能帮我做这个悬停效果

• 这是一个正常的圆圈
• 当经过它时，我希望它看起来那样，甚至让圆圈旋转

提前致谢

Answer 1

如果我对您的理解正确，这里有一种方法可以让您完成这项工作。

这有 3 个要素；图像、圆圈和间隙。

• 圆圈是一个 div，它有一个用于将其圆整的边框半径，以及一个带有您选择的颜色的边框。
• 间隙是一个 div，它是包装器的全高和预期间隙的宽度。 div 被赋予与背景相同的颜色（在这种情况下为白色 - 更改为您想要的任何颜色）。然后我们应用 -30deg 的变换来获得示例中的角度。
• 图像是一个带有边框半径的 div，位于包装器的中间。

然后，css 使用关键帧向间隙 div 添加动画，以在您将鼠标悬停在包装器上时使其旋转。这会产生圆圈旋转的错觉。

.wrapper {
  position: relative;
  height: 350px;
  width: 350px;
}

.wrapper .circle {
  position: absolute;
  height: 340px;
  width: 340px;
  border: 5px solid #00C17F;
  border-radius: 50%;
}

.wrapper .gap {
  position: absolute;
  width: 100px;
  height: 350px;
  left: 125px;
  background: white;
  -ms-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.wrapper:hover .gap {
  display: block;
  -webkit-animation: rotateCircle 20s linear infinite;
  -moz-animation: rotateCircle 20s linear infinite;
  -ms-animation: rotateCircle 20s linear infinite;
  -o-animation: rotateCircle 20s linear infinite;
  animation: rotateCircle 20s linear infinite;
}

.wrapper .image {
  position: absolute;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/f2/Light_Work_%28Unsplash%29.jpg");
  background-size: cover;
  background-position: right;
  border-radius: 50%;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
}

@keyframes rotateCircle {
  from {
    -ms-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }

  to {
    -ms-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -webkit-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg);
  }
}

<div class="wrapper">
  <div class="circle"></div>
  <div class="gap"></div>
  <div class="image"></div>
</div>

Answer 2

您可以只有一个 HTML 元素。但是你需要 3 层：

1. 持有绿色圆圈
2. 持有图片
3. 通过覆盖部分圆圈来创建间隙

第 3 层也可以在悬停时旋转。

CSS 允许您将伪元素之前和之后附加到 div 等元素（但不是普通的 img 元素，因此我们使用 div）。

这样我们就有了 3 层。我们使用 div 本身来显示绿色圆圈，并在其上方（以 z-index 术语）放置一个伪元素，该元素通过具有圆锥渐变背景图像来创建间隙。这仅在用户悬停时出现。另一个伪元素包含设置了 z-index 的图像，因此它位于其他伪元素之上，并且不受旋转圆锥梯度的影响。

请注意，此处使用的所有单位都是相对的，因此代码是响应式的。

.circle {
  --gap: 30deg; /* set this to what you want the gap to be */
  --border: 2px; /* set this to what you want the width of the green in the border to be can be in vmin for example for full responsiveness */
  position: relative;
  border: solid green var(--border);
  border-radius: 50%;
  width: 50vmin;
  height: 50vmin;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.circle::before, .circle::after {
  content: '';
  border-radius: 50%;
  position: absolute;
  margin: 0;
  padding: 0;
}
.circle::after {
  /* position and center the image */
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 70%;
  height: 70%;
  background-image: url(https://picsum.photos/id/0/400/400);
  background-size: cover;
  border-radius: 50%;
  border-style: solid;
  z-index: 2; 
}
.circle:hover::before {
  width: calc(100% + (3 * var(--border)));/* make it slightly bigger to make sure a 'stray' screen pixel does not get left out when the system converts part CSS px to screen pixels */
  height: calc(100% + (3 * var(--border)));
  top: calc(-1.5 * var(--border));
  left: calc(-1.5 * var(--border));
  z-index: 1;
  background-image: conic-gradient(white 0deg, white var(--gap), transparent var(--gap), transparent 180deg, white 180deg, white calc(180deg + var(--gap)), transparent calc(180deg + var(--gap)), transparent 360deg);
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

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