链接箭头滑动 4 种特效（箭头滑移/生长/换位 CSS 源码）

效果演示（真实可交互）

把鼠标移到任意链接上，观察箭头的滑动姿态与下划线的生长。四种玩法共用一套 HTML 结构，通过类名切换，适合博客列表、导航与「了解更多」类链接。

完整代码

HTML 结构：每个链接由文字 .la-text 与箭头 .la-arrow 组成，箭头用 aria-hidden="true" 标注为装饰性内容：

<a href="#" class="la-link la-slide">
  <span class="la-text">查看产品文档</span>
  <span class="la-arrow" aria-hidden="true">→</span>
</a>

核心 CSS：

.la-link { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.la-arrow {
  display: inline-block;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1),
              opacity .3s ease, width .4s ease;
}

/* 下划线生长（公共） */
.la-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #6c8cff, #b388ff);
  transition: width .4s cubic-bezier(.22, .61, .36, 1);
}
.la-link:hover::after { width: 100%; }

/* ① 箭头右移放大 */
.la-slide:hover .la-arrow { transform: translateX(6px) scale(1.2); }

/* ② 箭头从无到有：width 0 → 18px */
.la-grow .la-arrow { width: 0; opacity: 0; overflow: hidden; }
.la-grow:hover .la-arrow { width: 18px; opacity: 1; }

/* ③ 箭头换位到文字左侧 */
.la-swap .la-arrow { order: -1; margin-right: -26px; opacity: 0; }
.la-swap:hover .la-arrow { margin-right: 0; opacity: 1; transform: translateX(-6px); }

/* ④ 双箭头连滑 */
.la-double:hover .la-arrow { transform: translateX(8px); letter-spacing: 3px; }

参数说明

兼容性与性能

• 纯 CSS 实现，Chrome / Firefox / Safari / Edge 现代版本全部支持，flex 布局与 order 均为标准特性
• 动画作用于 transform / opacity / width，其中 width 动画开销略大，但链接宽度极小，无性能压力
• 追求极致流畅可把生长玩法也改成 transform: scaleX() 驱动，避免布局计算
• 箭头字符 → ↗ » 均为 Unicode 通用字符，无需加载图标字体

常见问题

Q: 箭头和文字没有垂直对齐？ 给 .la-link 设置 align-items: center，并给箭头加 line-height: 1；若箭头是图片或 SVG，再补一个 vertical-align: middle。

Q: 想要箭头出现在文字上方而不是旁边？ 把 .la-link 改成纵向布局（flex-direction: column），让箭头悬停时 translateY 移动，下划线规则保持不变。

Q: 链接里已经用 icon 字体，还能用这个效果吗？ 可以，箭头字符换成 <i class="icon-arrow"> 即可，CSS 选择器改为 .la-link:hover i，其余逻辑完全相同。

Q: 移动端没有 hover，箭头动画会怎样？ 触屏首次点击会触发 hover 态，箭头动画短暂展示后停留；如需始终显示箭头，删除各玩法的隐藏规则即可。