Question

所以我对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;
}

在这里输入代码

感谢您的帮助

Answer 1

这不是边缘问题。它适用于Edge，具体取决于文本（也可能是屏幕的密度）。这种事情在Firefox甚至Chrome上也会发生。

这是一个舍入错误：这就是为什么在你的图片上你有一些菜单项下面的点，但不是全部。

尝试添加隐藏的可见性，它会做到这一点。

同样对于这种类型的动画变换：scaleX如果比动画项目宽度更好的性能，（和带有scaleX（0）的项目将始终具有0的长度，这里不会出现舍入错误）

css动画在边缘无法正常显示

1 个答案: