我的CSS转换存在问题。我创建了一个用户配置文件设计,当用户将鼠标悬停在配置文件照片上时,边框会将其宽度从3px更改为10px。这导致整个网站在过渡时发生震动。
CSS
#timeline-user > .timeline-user-border{
border: 3px solid #2cbbee;
padding: 7px;
border-radius: 35px;
width: 50px;
height: 50px;
-webkit-transition:all 0.2s ease;
}
#timeline-user > .timeline-user-border:hover{
border: 10px solid #2cbbee;
padding: 0;
-webkit-transition:all 0.2s ease;
}
答案 0 :(得分:4)
您可以使用
执行此操作box-sizing:border-box;
基本上添加和删除填充和边框的额外数学会导致很多混乱。你可以通过包含边框和填充来否定这一点。
解: http://jsfiddle.net/mvY4k/2/
希望这有助于解决您的问题以及任何其他相关问题!如果您有任何其他问题,请告诉我! :)
答案 1 :(得分:2)
根据Smashing Magazine的this article:
在Firefox和Webkit中,未同步转换多个属性。您可以see in this example如何使边框缩小与填充增加相同的量(反之亦然)会导致以下内容抖动一下。 IE 10和Opera做对了。
事实上,如果你改变:
-webkit-transition:all 0.2s ease;
为:
-webkit-transition:width 0.2s ease;
你会注意到你的元素不再动摇。
我不知道有什么解决方案,如果我有代表,我会把它作为评论发布。
答案 2 :(得分:0)
使用box-shadow:
演示:http://jsfiddle.net/mvY4k/4/
#timeline-user > .timeline-user-border{
border: 3px solid #2cbbee;
padding: 7px;
border-radius: 35px;
width: 50px;
height: 50px;
-webkit-transition:all 0.2s ease;
}
#timeline-user > .timeline-user-border:hover{
-webkit-box-shadow:inset 0 0 0 10px #2cbbee;
-moz-box-shadow:inset 0 0 0 10px #2cbbee;
box-shadow:inset 0 0 0 10px #2cbbee;
}
更简单http://jsfiddle.net/qRJQY/1/
<div class="timeline-user-line">
<img src=http://api.randomuser.me/0.2/portraits/men/32.jpg />
</div>
风格:
*{
box-sizing:border-box;
padding:0;
margin:0;
}
.timeline-user-line{
border-radius: 100%;
width: 50px;
height: 50px;
position:relative;
border: 3px solid #2cbbee;
-webkit-transition:all 0.2s ease;
cursor:pointer;
-webkit-box-shadow:inset 0 0 0 0px #2cbbee;
-moz-box-shadow:inset 0 0 0 0px #2cbbee;
box-shadow:inset 0 0 0 0px #2cbbee;
}
.timeline-user-line:before,.timeline-user-line:after{
content:'';
position:absolute;
}
.timeline-user-line:before{
background:#2cbbee;
height: 2px;
width: 40px;
right:-50px;
top:20px;
}
.timeline-user-line img{
width:80%;
height:80%;
position:absolute;
left:10%;
top:10%;
border-radius: 100%;
}
.timeline-user-line:hover{
-webkit-box-shadow:inset 0 0 0 10px #2cbbee;
-moz-box-shadow:inset 0 0 0 10px #2cbbee;
box-shadow:inset 0 0 0 10px #2cbbee;
}