使用 CSS 实现鼠标悬停时的边框动画效果

作者: memory

时间: 2024-10-13

在前端开发中，为了提高用户体验，细微的交互动画变得越来越重要。鼠标悬停时的边框动画是一种常见的视觉效果，通过动态绘制边框，提升用户在网站上的交互体验。今天我们来讲解如何使用 CSS 实现这种效果。

效果预览

当鼠标悬停在元素上时，四边的边框会逐渐从元素的角落绘制出来，带来一种动态的视觉效果。我们将使用伪元素和 transition 来实现。

关键CSS代码解析

.button{border:0;background-color:#ccc}

.stream-line{
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    transition: .5s ease-in-out; /* 过渡动画设置 */
  }

  &::before {
    top: 0;
    left: 0;
    border-top: 0 solid #1890ff;
    border-left: 0 solid #1890ff;
  }

  &::after {
    right: 0;
    bottom: 0;
    border-bottom: 0 solid #1890ff;
    border-right: 0 solid #1890ff;
  }

  &:hover::before,
  &:hover::after {
    border-width: 1px; /* 鼠标悬停时边框宽度 */
    width: 100%; /* 动画从0扩展到整个元素 */
    height: 100%; /* 同上，设置动画扩展高度 */
  }
}

核心技术点

伪元素（::before 和 ::after）
- ::before 和 ::after 用来创建两个虚拟的框，这两个框分别从左上角和右下角开始绘制。
- content: ""; 用于创建这些伪元素，因为伪元素默认不会显示，除非指定内容。
绝对定位
- 通过 position: absolute; 将伪元素绝对定位在父元素的四个角落，使得边框能够从角落向四周展开。
边框初始状态
- 在元素初始状态下，边框的宽度和高度都设置为0（width: 0; height: 0;），看不到任何边框。
过渡动画
- transition: .5s ease-in-out; 设置了动画效果，过渡时间为 0.5 秒，并且使用了 ease-in-out 的缓动函数，动画效果更平滑。
鼠标悬停效果
- 在 :hover 状态下，伪元素的 width 和 height 都会扩展到100%，使得边框从元素的四个角逐渐展开，创建动态绘制边框的效果。

应用场景

这种边框动画效果可以应用在按钮、卡片组件、图片或者其他需要强调的元素上，使得用户在浏览页面时，有更好的视觉反馈。下面是一个可能的应用示例：

<button class="button stream-line">
  <p>鼠标移上来试试</p>
</button>

扩展与优化

不同的边框颜色
你可以根据需求更改边框的颜色，例如使用不同的颜色组合来实现多彩边框效果。
边框厚度
如果你想要更粗的边框，可以修改 hover 状态下的 border-width，从 1px 增加到其他值，如 3px。
边框绘制方向
如果想要边框从其他方向绘制，可以调整伪元素的 top, right, bottom, left 属性，或使用其他布局方式。