← 返回导航

文字揭示效果

hovers
下划线中心展开 中心展开
下划线从左滑入 左入下划线
文字向上滑出 向上滑出
遮罩揭示文字 遮罩揭示

关键点

  • 文字揭示效果包含下划线展开和文字滑入两部分，组合形成优雅的 hover 动效
  • 下划线常用 width: 0 → 100% 或 scaleX(0 → 1) 实现从左到右的展开
  • 文字部分初始 translateY(100%) + 透明，hover 时位移到原位并渐显
  • 使用 overflow: hidden 的容器作为"窗口"，只显示原位范围内的文字
  • 下划线和文字可设置不同 transition-delay，让动画有先后层次

效果说明

鼠标悬停时文字或下划线产生揭示动画的效果。包含下划线从中心展开、从左滑入，以及文字从遮罩中向上滑出等多种形式。这里展示 4 种变体：中心展开、左入下划线、向上滑出、遮罩揭示。