如何在 CSS/JS 中实现 hover 线性擦除过渡？

Question

我还应该提到，我不能只将一张图像放在另一张图像之上，因为我还要处理透明图像。 线性划像预览

Answer 1

您根本不需要 js 或外部库来实现这种特殊效果。

 .container{ width: 50%; height: 200px; position: relative; border: 2px solid red; }.underlay{ width: 100%; height: 100%; background: lightblue; }.overlay{ position: absolute; right: 0; top: 0; width: 0; height: 100%; background: pink; transition: 300ms; }.container:hover.overlay{ width: 100%; }

 <div class='container'> <div class='underlay'></div> <div class='overlay'></div> </div>