css动画没有';不能在边缘正确显示
因此,准确地说,我在css动画“从中心画下划线”方面遇到了一些问题。 除边缘外,它在每个浏览器中都能正确显示。 我在动画显示自身的链接下面得到了小点(见图) 在这里输入代码`css动画没有';不能在边缘正确显示,css,microsoft-edge,Css,Microsoft Edge,因此,准确地说,我在css动画“从中心画下划线”方面遇到了一些问题。 除边缘外,它在每个浏览器中都能正确显示。 我在动画显示自身的链接下面得到了小点(见图) 在这里输入代码` .hvr-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px)
.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;
}
在这里输入代码`
.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;
}
感谢您的帮助这不是边缘问题。它在边缘上工作,这取决于文本(也可能取决于屏幕的密度)。这种事情有时也会发生在Firefox甚至Chrome上 这是一个舍入错误:这就是为什么在你的图片上,你在一些菜单项下有点,但不是全部 尝试添加一个隐藏的可见性,它会成功的
同样对于这种类型的动画转换:scaleX如果在性能上优于设置项目宽度的动画(并且带有scaleX(0)的项目的长度始终为0,则此处不会发生舍入错误)在代码标记之间直接在此处发布CSS,不仅仅是作为一个外部链接。寻求代码帮助的问题必须包含在问题本身中重现所需的最短代码,最好是在堆栈片段中。虽然您提供了一个链接,但如果该链接无效,您的问题对其他将来遇到相同问题的用户将毫无价值。看到了吧。我很少在stackoverflow上发问。对不起,对我来说似乎很好:是的,但它在edge中不起作用,它在除edge之外的其他任何地方都起作用:/