用伪元素+width动画实现下划线从左到右描边效果最常用可控：设a为relative，::after绝对定位到底部，hover时width从0到100%过渡，配合cubic-bezier缓动更自然。
下划线 hover 出现太突然，本质是默认用 text-decoration 或 border-bottom 简单切换导致的“硬切”。用 CSS keyframes 做从左向右描边动画，能自然过渡、提升质感。
这是最常用也最可控的方式：不直接操作文字下划线，而是用 ::after 伪元素模拟一条横线，通过控制它的宽度和位置来实现“从左到右”的绘制感。
position: relative，为伪元素提供定位上下文absolute，底部对齐，初始 width: 0、left: 0
animation 触发 width 从 0 到 100% 的变化示例代码：
a { position: relative; text-decoration: none; color: #333; }<br>a::after {<br> content: '';<br> position: absolute;<br> bottom: -2px;<br> left: 0;<br> width: 0;<br> height: 2px;<br> background: #007bff;<br> transition: width 0.3s ease-out;<br>}<br>a:hover::after { width: 100%; }如果想控制起始/加速/回弹等细节，就用 @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 {<br> from { width: 0; transform: scaleX(0); }<br> to { width: 100%; transform: scaleX(1); }<br>}<br><br>a:hover::after {<br> animation: drawLine 0.4s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;<br>}伪元素 + width 动画在所有现代浏览器中表现稳定，且只触发合成层（尤其是加了 transform），不会引起重排重绘，很轻量。
left / right 做动画——会触发 layout-webkit-transform 前缀background-image: linear-gradient() + background-size 动画，原理类似基本上就这些。描边动画不复杂但容易忽略节奏和锚点控制，调好 timing-function 和 duration，比加一堆 fancy 效果更显专业。
以上就是css下划线hover出现太突然如何优化_用keyframes制作从左向右描边动画的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
326
收藏
