简而言之,我有一个底部边框较暗的按钮,在悬停时,我希望按钮向下移动一点并缩小边框(以产生按下它的效果)。
但是,它在动画时会轻微抖动,完全消除了“按下”按钮的感觉。
这是一个 Fiddle 演示问题以及有问题的 CSS:
.btn {
color: grey;
background: lightgrey;
border: 0 rgba(0, 0, 0, .1) solid;
border-bottom-width: 4px;
font-family: sans-serif;
padding: 10px;
position: relative;
text-decoration: none;
top: 0;
transition: all 250ms;
}
.btn:hover {
top: 2px;
border-bottom-width: 2px;
}
为了简单起见,我在这里没有使用像 -webkit
这样的前缀。
主要问题是底部边框。按钮可以很好地向下滑动,但边框似乎在做一些不同的事情(并且不平滑)。
这里有什么想法吗?
最佳答案
尝试用 transform: translateY(2px)
替换 top
transition,同时用 ::before
伪元素替换 bottom border并为它的 scale
属性设置动画:
https://jsfiddle.net/qjfstq1c/1/
.btn, .btn:before {
transition: all 250ms;
transform-origin: top center;
}
.btn {
display: inline-block;
color: grey;
background: lightgrey;
font-family: sans-serif;
padding: 10px;
position: relative;
text-decoration: none;
}
.btn:before {
content: '';
position: absolute;
top: 100%; left: 0; right: 0;
border-top: 4px solid #bebebe;
}
.btn:hover {
transform: translateY(2px);
}
.btn:hover:before {
transform: scaleY(.5);
}
关于CSS 过渡在多次更改期间闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43013462/