如何解决圆形边框中的悬停效果
谁能帮我做这个悬停效果
- 这是一个正常的圆圈
- 当经过它时,我希望它看起来那样,甚至让圆圈旋转
解决方法
如果我理解正确的话,这里有一种方法可以让您完成这项工作。
这有 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>
您可以只有一个 HTML 元素。但是你需要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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。