我有一个大圆圈，大圆圈里面有 3 个小圆圈。 现在我希望每当我将鼠标悬停在大圆圈上时，这些小圆圈都会移动并改变它们的宽度/高度，但每当我尝试这样做时，都会产生不必要的影响，从而导致很多问题。有人可以指导我如何解决它吗？
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.wrapper .button {
width : 150px;
height: 150px;
border-radius: 50% ;
background-color: #FFC5B4 ;
text-align: center ;
line-height: 150px;
}
.button .circle {
display: inline-block ;
width: 20px ;
height: 20px;
border-radius: 50% ;
background-color: crimson ;
transition: all 3s ease-in-out ;
}
.button:hover .circle.num1 {
transform: translate(-10em,-10em) ;
width: 100px ;
height: 100px;
}
.button:hover .circle.num2 {
transform: translateY(-15em) ;
width: 100px ;
height: 100px;
}
.button:hover .circle.num3 {
transform: translate(10em,-10em) ;
width: 100px ;
height: 100px;
}<body>
<div class="wrapper">
<div class="button">
<span class="circle num1"></span>
<span class="circle num2"></span>
<span class="circle num3"></span>
</div>
</div>
</body>您需要将position:absolute用于圆圈和margin才能将其放置在正确的位置。
绝对位置将删除圆的边界。
见下面的片段 -
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.wrapper .button {
width : 150px;
height: 150px;
border-radius: 50% ;
background-color: #FFC5B4 ;
text-align: center ;
line-height: 150px;
}
.button .circle {
display: inline-block ;
width: 20px ;
height: 20px;
border-radius: 50% ;
background-color: crimson ;
transition: all 3s ease-in-out;
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
span.circle.num1{
margin-left:40px;
}
span.circle.num3{
margin-right:40px;
}
.button:hover .circle.num1 {
transform: translate(-10em,-10em) ;
width: 100px ;
height: 100px;
}
.button:hover .circle.num2 {
transform: translateY(-15em) ;
width: 100px ;
height: 100px;
}
.button:hover .circle.num3 {
transform: translate(10em,-10em) ;
width: 100px ;
height: 100px;
}<body>
<div class="wrapper">
<div class="button">
<span class="circle num1"></span>
<span class="circle num2"></span>
<span class="circle num3"></span>
</div>
</div>
</body>