因此,准确地说,我在使用 css 动画“从中心下划线”时遇到了一些麻烦。 它在除边缘之外的每个浏览器中都能正确显示。 我在动画显示本身的链接下方有小点(见图) dots underneath links in navbar 在此处输入代码`
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #b80c0c;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
在这里输入代码`
感谢帮助
最佳答案
这不是 Edge 问题。它适用于 Edge,具体取决于文本(也可能是屏幕的密度)。这种事情有时也会在 Firefox 甚至 Chrome 上发生。
这是一个舍入错误:这就是为什么在您的图片上有些菜单项下方有点,但不是全部。
尝试添加隐藏的可见性,它会成功。
同样对于这种类型的动画转换:scaleX 如果在性能方面比动画元素宽度更好,(并且具有 scaleX(0) 的元素将始终具有 0 的长度,此处不会发生舍入错误)
关于css 动画不能在边缘正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48266771/