我已经构建了这些圆圈,当鼠标悬停时它们会扩展边框。我现在遇到的唯一问题是有时圆圈会抖动/摇晃。当我设置transition: all .1s ease-in-out;
超过 0.2 秒。
有解决这个问题的方法吗?还是事情就是这样?
这是其中的代码JsFiddle http://jsfiddle.net/enBMC/
感谢您的任何帮助!
EDIT:我正在转换圆圈的尺寸(宽度和高度)以保持居中。我意识到这导致了转换过程中的抖动。有解决办法吗?
我去掉了顶部/左侧定位的百分比值,清理了边距并对齐了外圆的边框宽度:
这里有一个DEMO http://jsfiddle.net/enBMC/8/
.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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)