css下划线hover出现太突然如何优化_用keyframes制作从左向右描边动画

P粉602998670 2025-12-14 00:00:00 次阅读

用伪元素+width动画实现下划线从左到右描边效果最常用可控：设a为relative，::after绝对定位到底部，hover时width从0到100%过渡，配合cubic-bezier缓动更自然。

下划线 hover 出现太突然，本质是默认用 text-decoration 或 border-bottom 简单切换导致的“硬切”。用 CSS keyframes 做从左向右描边动画，能自然过渡、提升质感。

用伪元素 + width 动画实现描边效果

这是最常用也最可控的方式：不直接操作文字下划线，而是用 ::after 伪元素模拟一条横线，通过控制它的宽度和位置来实现“从左到右”的绘制感。

给链接加 position: relative，为伪元素提供定位上下文
伪元素设为 absolute，底部对齐，初始 width: 0、left: 0
hover 时用 animation 触发 width 从 0 到 100% 的变化

示例代码：

 a { position: relative; text-decoration: none; color: #333; }
a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s ease-out;
}
a:hover::after { width: 100%; }

用 keyframes 实现更精细的描边节奏

如果想控制起始/加速/回弹等细节，就用 @keyframes 替代简单 transition。比如让线条先快后慢，或带一点“回抽”感，会更像手绘描边。

定义动画：从 width: 0 → width: 100%，可加入 transform: scaleX() 配合避免重排
用 animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1) 调出自然缓动
注意设置 animation-fill-mode: forwards，保证动画结束后保持最终状态

示例动画定义：

@keyframes drawLine {
  from { width: 0; transform: scaleX(0); }
  to { width: 100%; transform: scaleX(1); }
}

a:hover::after {
  animation: drawLine 0.4s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}