Question

我真的真的以为我很聪明......

我想要一种优雅的方法，使用一个具有悬浮效果的按钮，使用柔和的颜色过渡进行某种擦拭（从上到下，从左到右）。我认为最好的方法是使用:after伪类创建一个框，并在悬停时弄乱它的高度或位置，用z-index将其保留在实际元素后面，并使用rgba()标记的<a>标记的透明背景。

事情是，不时地通过该菜单进行鼠标操作时，按钮底部会留下一条细线。我可以想象这个问题完全取决于我自己的浏览器的渲染引擎，但是我想知道你们是否也看到它们，或者是否有人可能会解释导致这种行为的原因。

该小提琴中的示例使用transition: top作为隐藏:after创建的框的方法，但在使用transition: height和transition: transform时我得到了相同的结果。

实际上，划伤那个，我的结果更糟。如果你想看到错误发生在一个很多，请检查这个错误http://jsfiddle.net/MrPickle/ysdhexbq/5/如果你在元素有机会之前将光标一直传递过来，它会更好（读取：更糟）完成第一次过渡。

Answer 1

这是一个可能有用的技巧：强制硬件加速。

您需要添加的是：

a:after {
    -webkit-transform: translate3d(0, 0, 0);
}

通过添加translate3d，它会将浏览器翻转为~hardware accelerated mode，这基本上可以让您的css表现得更好。

下面是一篇讨论filter:blur样式的文章（filter:blue对浏览器非常沉重，这就是硬件加速非常有用的原因） http://blog.kaelig.fr/post/47025488367/css-filters-in-the-real-world

Answer 2

嗯.. Iron Developer建议的硬件加速肯定会阻止我的机器上发生错误，但转换开始的最初几次看起来有点紧张。鉴于我所追求的转变并非真正令人费解，我不觉得调用更多的核心系统能力会浪费绘画时间。

我摆弄了一下，但是我注意到当父div周围有一个边框时，会说出行显示的区域因为...我想。

似乎跑得很快，我没有注意到我之前遇到过的问题。