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

在前端开发中，为了提高用户体验，细微的交互动画变得越来越重要。鼠标悬停时的边框动画是一种常见的视觉效果，通过动态绘制边框，提升用户在网站上的交互体验。今天我们来讲解如何使用 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%; /* 同上，设置动画扩展高度 */
  }
}

核心技术点

1. 伪元素（::before 和 ::after）

   • ::before 和 ::after 用来创建两个虚拟的框，这两个框分别从左上角和右下角开始绘制。
   • content: ""; 用于创建这些伪元素，因为伪元素默认不会显示，除非指定内容。

2. 绝对定位

   • 通过 position: absolute; 将伪元素绝对定位在父元素的四个角落，使得边框能够从角落向四周展开。

3. 边框初始状态

   • 在元素初始状态下，边框的宽度和高度都设置为0（width: 0; height: 0;），看不到任何边框。

4. 过渡动画

   • transition: .5s ease-in-out; 设置了动画效果，过渡时间为 0.5 秒，并且使用了 ease-in-out 的缓动函数，动画效果更平滑。

5. 鼠标悬停效果

   • 在 :hover 状态下，伪元素的 width 和 height 都会扩展到100%，使得边框从元素的四个角逐渐展开，创建动态绘制边框的效果。

应用场景

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

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

扩展与优化

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

结论

通过 ::before 和 ::after 伪元素，以及简单的 CSS 动画属性，我们可以轻松实现动态边框效果。这不仅让页面的交互性大大增强，还可以为用户提供更加生动的浏览体验。在现代网页设计中，合理使用这样的细节动画，能够有效提升用户的参与感和页面的美观性。

版权声明：本文为原创文章，版权归 全栈开发技术博客 所有。

本文链接：https://www.lvtao.net/dev/css-hover-draw-border.html

转载时须注明出处及本声明