简单的旋转悬停效果不起作用

Question

我正在尝试创建一个简单的效果，以便当我将鼠标悬停在最内圈上时，两个外圈会旋转以创建一个很酷的效果。我认为这将是一项简单的任务，但我似乎无法弄清楚我做错了什么。当我将鼠标悬停在内圈上时，所有的变化都是两个内圈向屏幕的右下角移动，根本没有旋转。我在这里想念什么？谢谢

.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>

Answer 1

您正在使用带有平移的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>

Answer 2

在:hover 中设置transform 属性将覆盖现有的transform 属性，因此您需要在:hover 版本中包含translate 转换以避免在设置它们的过程中移动圆圈旋转。

如果您希望旋转动画，您还需要设置旋转变换的初始值。

附加说明：使用transition，旋转只会发生一次。如果您想要重复 旋转，您需要使用动画（您可以通过取消注释 sn-p 中的 animation 行来做到这一点）。

演示：

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  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%) rotate(0deg);
  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%) rotate(0deg);
  border: 2px;
  border-style: solid;
  border-color: white transparent white white;
  transition: 1.5s all ease-in-out;
}

.circle:hover .circle-2 {
  /*animation: spin 1.5s infinite linear;*/
  transform: translate(-50%, -50%) rotate(360deg);
}

.circle:hover .circle-1 {
  /*animation: spin 1.5s infinite linear reverse;*/
  transform: translate(-50%, -50%) rotate(-360deg);
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

<div class="wrapper">
  <div class="circle">
    <div class="circle-1"></div>
    <div class="circle-2"></div>
  </div>
</div>