Question

我正在尝试创建一个简单的效果，以便当我将鼠标悬停在最里面的圆圈上时，两个外环会旋转以创建一个很酷的效果。我以为这是一件容易的事，但我似乎无法弄清楚自己在做什么错。当我将鼠标悬停在内圈上时，所有的变化是两个内圈朝着屏幕的右下角移动，而根本没有旋转。我在这里想念什么？谢谢

<application>

<service android:name=".NotificationListener"
            android:enabled="true"
            android:permission="android.permission.BIND_NOTIFICATION_LISTENER_SERVICE">
            <intent-filter>
                <action android:name="android.service.notification.NotificationListenerService" />
            </intent-filter>
        </service>

 </application>

NotificationListenerService

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

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

如果您想对旋转进行动画处理，还需要为旋转变换设置初始值。

另外一个注意事项：使用transition，旋转只会发生一次。如果您想重复旋转，则需要使用动画（您可以通过取消注释代码段中的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>

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

2 个答案: