如何创建底部边框扩展的悬停效果？

悬停时展开底部边框

在这个问题中，目标是创建一个悬停效果，当光标悬停在元素上时，底部边框会展开。提供的代码片段使用具有不透明度过渡的伪元素来显示悬停时的边框。

解决方案：

为了达到所需的效果，我们可以使用 CSS 变换：scaleX() 扩大边框而不是不透明度。它的工作原理如下：

1. 创建一个带有底部边框的伪元素：

   h1:after {
     position: absolute;
     left: 0;
     content: '';
     height: 40px;
     width: 275px;
     border-bottom: solid 3px #019fb6;
   }

   登录后复制

2. 应用带有过渡的scaleX()变换:

   h1:after {
     ...
     transform: scaleX(0);
     transition: transform 250ms ease-in-out;
   }

   登录后复制

3. 通过将scaleX设置为1来扩展悬停时的边框：

   h1:hover:after {
     transform: scaleX(1);
   }

   登录后复制

扩展方向的修改：

另外，我们可以通过调整伪元素的transform-origin属性来控制边框扩展的方向：

1. 从中心扩展：

   h1:after {
     ...
     transform-origin: 50% 50%;
   }

   登录后复制

2. 从右侧展开：

   h1:after {
     ...
     transform-origin: 100% 50%;
   }

   登录后复制

3. 从左侧展开：

   h1:after {
     ...
     transform-origin: 0% 50%;
   }

   登录后复制

以上是如何创建底部边框扩展的悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！