简单的旋转悬停效果不起作用 [英] Simple rotating hover effect wont work

问题描述

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

I am trying to create a simple effect so that when I hover on the inner most circle, the two outer rings rotate around to create a cool effect. I thought this would be an easy task but I cannot seem to figure out what I am doing wrong. When I hover over the inner circle, all that changes are the two inner rings move towards the bottom right hand corner of the screen, without rotating at all. What am I missing here? Thanks

.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 的值以居中并避免使用transform，这样您便可以进行所需的旋转：

You are using transform with translation in order to center your element then you are overriding the transform with the rotation which create the issue. Instead you can adjust the top/left values in order to center and avoid using transform then you will have the needed rotation:

>

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

您还可以通过使用如下伪元素来简化代码：

You can also simplify your code by using pseudo elements like this:

* {
 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>

这篇关于简单的旋转悬停效果不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！