我在 css 转换方面遇到了一个小问题。
我正在尝试使背景宽度在悬停时具有动画效果,它确实有效,但它有点跳动。
我的CSS代码是
ul {
list-style:none;
margin: 0;
padding:0;
}
ul li {
margin-bottom: 8px;
color:#999;
}
ul li:hover {
color: #FFF;
background-color: #f6634c;
width: 200px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
演示可以在这里看到http://codepen.io/anon/pen/IFbds
它跳动的原因是因为我没有在 li 上指定宽度,但如果我指定了,动画背景将不会从左边开始。我希望宽度在文本的开头具有动画效果。
此外,它仅在您将鼠标悬停在链接开头附近时才会显示动画。
最佳答案
赞this ?
ul {
list-style:none;
margin: 0;
padding:0;
overflow:hidden; /*to clear the floats*/
}
ul li {
margin-bottom: 8px;
color:#999;
min-width:0px; /*the property we are going to animate, set to specific value*/
float:left; /*prevent display block from filling up all available width*/
clear:left; /*prevent float left from putting blocks in-line*/
display:block;/*cause width to be interpreted my way*/
}
ul li:hover {
color: #FFF;
background-color: #f6634c;
min-width: 200px; /*BOOM*/
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
关于css - 如何在悬停时使背景宽度动画流畅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13662193/