html5 抖动效果,html5 – 清理CSS抖动

我摆脱了上/左定位的百分比值,清理了边距并对齐了外圈的边框宽度：

这是一个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;

}