我建立了这些圈子,当鼠标悬停时扩展边框.我现在遇到的唯一问题是圆圈会抖动/抖动.当我设置转换时,它变得更加明显：所有.1s轻松进出;超过.2s.
是否有解决这个问题的方法,或者只是它的方式？
这是JsFiddle中的代码
感谢您的帮助！
编辑：我正在转换圆的尺寸(宽度和高度)以保持居中.我意识到这会导致过渡期间的抖动.有工作吗？
解决方法
我摆脱了上/左定位的百分比值,清理了边距并对齐了外圈的边框宽度：
这是一个DEMO
.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;
}