css 动画不需要的效果答案

【问题标题】：css animation unwanted effectcss 动画不需要的效果
【发布时间】：2018-10-16 23:30:41
【问题描述】：

我有一个大圆圈和大圆圈内的 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>

【问题讨论】：

一段时间后出现滚动条。我猜你的包装太小了，然后圆圈就换了。
我认为最好给内圈设置一个绝对位置，因为它们的位置是相互影响的

标签： html css animation css-transitions

【解决方案1】：

您需要使用position:absolute 来表示圆圈，并使用margin 将其放置在正确的位置。

绝对位置将删除圆的边界。

见下sn-p-

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

【讨论】：