Adam Argyle＆Sative Mouse-Out CSS悬停效果

浏览Codepen，我偶然发现了亚当·阿盖尔（Adam Argyle）迷人的CSS悬停效应。演示的应用程序般的感觉，尤其是背景色，从左向右顺利过渡，然后向右退出，立即引起了我的注意。我在重新创建它的过程中度过了良好的过程，该过程突出了过渡，转换和偏移的优雅使用。

我的最初方法集中在背景过渡，操纵background-size和background-position 。但是，我无法实现所需的双向运动。

接下来，我探索了CSS变换。虽然scaleX()提供了潜力，但将其直接应用于链接元素会改变内容，这是不良结果。解决方案？伪元素！

这是我的实施：

首先，基本样式：

 a {
  位置：相对；
}

a :: {之前{
  背景：＃ff9800;
  内容： ””;
  插图：0;
  位置：绝对；
  变换：scalex（0）;
  过渡：变换.5s易于进出；
  z index：-1;
}

这将创建一个带有橙色背景的伪元素（ ::before ），绝对位于链接中。 transform: scaleX(0);最初将其隐藏起来，并transition确保了平稳的动画。

然后定义悬停效应：

答：悬停:: {
  变换：scalex（1）;
  转换原始：对；
}

在悬停的情况下， scaleX(1)扩展了伪元素，至关重要的是transform-origin: right;将扩展点设置为右侧。这是鼠标外行为的关键。

魔法在于transition的相互作用和transform-origin的变化。该过渡将scaleX() （在悬停在鼠标外的0到1）顺利进行动画。 transform-origin的变化从left （默认值）向右移动到悬停在right的转换会逆转动画方向，从而产生无缝的双向效果。最初，我为此而苦苦挣扎，但是transform-origin属性被证明是缺失的作品。

感谢Adam Argyle的灵感！这种效果展示了当创造性使用时简单CSS技术的力量。

以上是Adam Argyle＆Sative Mouse-Out CSS悬停效果的详细内容。更多信息请关注PHP中文网其他相关文章！