如何实现鼠标悬停时边框颜色从左到右缓慢过渡效果？

嘿，这个边框绘制效果确实比单纯的颜色切换更有质感！要实现鼠标悬停时边框从左到右缓慢“画出来”的效果，我给你分享两种实用的简便方法，分别适合不同场景：

方法一：用背景渐变模拟边框（适合矩形/圆形，纯CSS实现） #

这种方法不需要额外的HTML元素，完全靠CSS背景渐变和过渡动画来实现，代码简洁易维护：

.box {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 用4条线性渐变背景模拟边框，初始时红色仅占一半区域 */
  background: 
    linear-gradient(to right, red 50%, black 50%) top / 200% 3px,
    linear-gradient(to right, red 50%, black 50%) bottom / 200% 3px,
    linear-gradient(to right, red 50%, black 50%) left / 3px 200%,
    linear-gradient(to right, red 50%, black 50%) right / 3px 200%;
  background-repeat: no-repeat;
  /* 统一过渡动画 */
  transition: all 0.8s ease-out;
}

.box:hover {
  /* 悬停时移动背景位置，让红色覆盖整个边框 */
  background-position: 
    right top,
    right bottom,
    left bottom,
    right top;
}

原理：把边框拆成上下左右四条独立的渐变背景，初始状态下红色部分只占每条边的一半；悬停时通过移动background-position，让红色部分逐渐铺满整个边框，视觉上就像从左到右绘制线条一样。

方法二：SVG路径动画（适合圆形，效果更精准） #

如果是圆形边框，用SVG的stroke-dasharray和stroke-dashoffset属性能实现更流畅的“绕圈绘制”效果，这也是前端实现路径动画的经典方案：

HTML：

<div class="box">
  <!-- 用SVG绘制两层圆形，黑色为默认边框，红色为动画边框 -->
  <svg viewBox="0 0 132 132" width="100%" height="100%">
    <circle cx="66" cy="66" r="63" stroke="black" stroke-width="3" fill="transparent" />
    <circle class="animated-border" cx="66" cy="66" r="63" stroke="red" stroke-width="3" fill="transparent" />
  </svg>
  <!-- 你的内容放在这里，用z-index确保在SVG上方 -->
  <span class="box-content">我是内容</span>
</div>

CSS：

.box {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.animated-border {
  /* stroke-dasharray值等于圆形周长：2×π×半径（63px）≈396 */
  stroke-dasharray: 396;
  /* 初始时让红色边框完全隐藏 */
  stroke-dashoffset: 396;
  transition: stroke-dashoffset 1s ease-out;
}

.box:hover .animated-border {
  /* 悬停时让红色边框完全显示，实现绘制效果 */
  stroke-dashoffset: 0;
}

.box-content {
  position: relative;
  z-index: 1;
}

原理：通过stroke-dasharray把SVG的圆形边框拆成一段和周长等长的虚线，再用stroke-dashoffset让这段虚线完全移出可视区域；悬停时将stroke-dashoffset设为0，虚线就会逐渐“填满”整个圆形路径，完美模拟手绘线条的效果。

你可以根据自己的实际场景选择合适的方法，两种都不需要复杂的JS，纯CSS就能搞定！

内容的提问来源于stack exchange，提问作者The Walrus