我正在尝试创建一个简单的效果,以便当我将鼠标悬停在最内圈时,两个外环旋转以创建很酷的效果。我认为这将是一项简单的任务,但我似乎无法弄清楚我做错了什么。当我将鼠标悬停在内圈上时,所有变化都是两个内圈向屏幕右下角移动,根本不旋转。我在这里缺少什么?谢谢
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
transform: rotate(360deg);
}
.circle:hover .circle-1 {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
您正在使用transform
使用平移以使元素居中,然后您将通过旋转覆盖变换,从而产生问题。相反,您可以调整top
/left
值以便居中并避免使用变换,那么您将获得所需的旋转:
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: calc(50% - 55px);
left: calc(50% - 55px);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: calc(50% - 60px);
left:calc(50% - 60px);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
transform: rotate(360deg);
}
.circle:hover .circle-1 {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
您还可以通过使用伪元素来简化代码,如下所示:
* {
box-sizing:border-box;
}
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto;
background: black;
}
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
background:radial-gradient(circle at center, grey 50px,transparent 51px);
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:before,
.circle:after {
content:"";
border-radius: 50%;
position: absolute;
transition: 1.5s all ease-in-out;
border: 2px solid white;
}
.circle:before {
top:0;
left:0;
right:0;
bottom:0;
border-left-color:transparent;
}
.circle:after{
top:5px;
left:5px;
bottom:5px;
right:5px;
border-right-color:transparent;
}
.circle:hover::before {
transform: rotate(360deg);
}
.circle:hover::after {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)