html - 清理 CSS 抖动

Question

我已经建立了这些圆圈，当鼠标悬停时会扩展边框。我现在遇到的唯一问题是有时圆圈会抖动/晃动。当我将其设置transition: all .1s ease-in-out;为超过 0.2 秒时，它变得更加明显。

是否有解决此问题的方法，或者就是这样？

这是JsFiddle中的代码

感谢您的任何帮助！

编辑：我正在转换圆圈的尺寸（宽度和高度）以保持居中。我意识到这导致了过渡期间的抖动。有解决办法吗？

Answer 1

我摆脱了顶部/左侧定位的百分比值，清理了边距并对齐了外圆的边框宽度：

这是一个演示

.box {
    position: relative;
    width: 220px;
    height: 220px;
    float: left;
    margin-right: 50px;
}

.clearcircle {
    position: absolute;
    top:15px;
    left:15px;
    width: 190px;
    height:190px;
    border-radius: 100%;
    background-color: transparent;
    border: 5px solid #c0392b;
    transition: all .2s ease-in-out;
}

.clearcircle:hover {
    width:220px;
    height: 220px;
    top: 0px;
    left: 0px;
    border: 5px solid #c0392b;

}
.circle {
    position: absolute;
    top:50%;
    margin-top: -100px;
    left: 50%;
    margin-left:-100px;
    width: 200px;
    height:200px;
    border-radius: 100%;
    background-color: #e74c3c;
    overflow: hidden;
    transition: all .2s ease-in-out;

}


.circle p {
    position:relative;
    text-align: center;
    top: 50%;
    margin-top: -55px;
    color: white;
    transition: all .3s;
}


.circle:hover{
    background-color: #e97468;
}

Answer 2

不要过渡宽度和高度。保持相同的宽度和高度，只是过渡你的外圆的边界。

对于您的内圈 (.circle)，设置一个 12 像素实心 #ffffff 的白色边框。现在它总是相对于外圆在同一个位置，现在它不必改变大小。标题也不能跳来跳去，因为它总是在同一个位置。

对于外圈，当它没有悬停时，确保它的大小和边框与悬停时相同，但将边框设为白色，5px 纯色#ffffff。

我认为你也可以取消很多额外的定位。

这是一个修改过的jsFiddle，所以你可以看一下，这里是修改后的CSS：

.box {
position: relative;
width: 220px;
height: 220px;
float: left;
margin-right: 50px;
    text-align: center;
}

.clearcircle {
width: 225px;
height:225px;
border-radius: 100%;
background-color: transparent;
border: 5px solid #ffffff;
transition: all .2s ease-in-out;
}

.clearcircle:hover {
border: 5px solid #c0392b;

}
.circle {
width: 200px;
height:200px;
    border: 12px solid #ffffff;
border-radius: 100%;
background-color: #e74c3c;
overflow: hidden;
transition: all .2s ease-in-out;

}


.circle p {
position:relative;
text-align: center;
color: white;
transition: all .3s;
}


.circle:hover{
background-color: #e97468;
} 

顺便说一句，将div或p放入a标记会破坏已验证 XHTML 的标记。您可能想改用 div，并添加一个“点击”操作，使其表现为链接。

Answer 3

边际去抖抖动：0 -12%；如果添加 padding填充：0 12%；

menu li a:hover {
    margin: 0 -12%;
    padding: 0 12%;
    color: #fff;
    background: #ff5a5f;
    display: inline-block;
}