圆形边框悬停效果

Hover effect in circle border

谁能帮我做这个悬停效果

提前致谢

如果我没理解错的话,这里有一种方法可以让你完成这项工作。

这个有3个要素;图像,圆圈和间隙。

  • 圆圈是一个 div,带有圆角的 border-radius 和您选择的颜色的边框。
  • 间隙是一个 div,即包装纸的全高和预期间隙的宽度。 div 被赋予与背景相同的颜色(在本例中为白色 - 更改为您想要的任何颜色)。然后我们应用 -30deg 的变换来获得您示例中的角度。
  • 图像是 div 带有 border-radius 并且位于包装纸的中间。

然后 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>

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

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

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

CSS 允许您将伪元素前后附加到诸如 divs 之类的元素(但不是普通的 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>