简介
在本实验中，我们将学习如何使用 CSS 创建悬停下划线动画。此效果可用于为文本增添视觉吸引力，并提升网站的用户体验。通过遵循本实验中概述的步骤，你将更好地理解如何使用 CSS 创建动态且引人入胜的网页内容。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 中级 级别的实验，完成率为 77%。获得了学习者 100% 的好评率。
悬停下划线动画
虚拟机中已提供了 index.html 和 style.css。
要在用户将鼠标悬停在文本上时创建动画下划线效果，请执行以下步骤：
- 使用
display: inline-block使下划线仅跨越文本内容的宽度。 - 将
::after伪元素与width: 100%和position: absolute一起使用，将其放置在内容下方。 - 使用
transform: scaleX(0)最初隐藏伪元素。 - 使用
:hover伪类选择器应用transform: scaleX(1)并在悬停时显示伪元素。 - 使用
transform-origin: left和适当的transition为transform添加动画效果。 - 移除
transform-origin属性以使变换从元素中心开始。
以下是将该效果应用于文本元素的示例 HTML 代码：
<p class="hover-underline-animation">Hover this text to see the effect!</p>
以及相应的 CSS 代码：
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation::after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已完成悬停下划线动画实验。你可以在 LabEx 中练习更多实验以提升你的技能。