简介
在本实验中，我们将学习如何使用 CSS 创建一个在悬停时具有放大动画效果的按钮。此效果可用于为网站或应用程序增添交互性和视觉吸引力。通过应用 transform 属性和 :hover 伪类，我们可以使按钮在用户悬停时放大，从而创建一个微妙而有效的动画。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
按钮放大动画
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文，您可以 切换至英文原版
按钮放大动画
虚拟机中已经提供了 index.html 和 style.css。
要创建悬停时的放大动画，你可以使用适当的 transition 来为元素的变化设置动画。使用 :hover 伪类将 transform 属性更改为 scale(1.1)。这样当用户悬停在元素上时，它就会放大。
以下是你可以使用的示例代码片段：
<button class="button-grow">Submit</button>.button-grow {
color: #65b5f6;
background-color: transparent;
border: 1px solid #65b5f6;
border-radius: 4px;
padding: 0 16px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.button-grow:hover {
transform: scale(1.1);
}请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已经完成了按钮放大动画实验。你可以在 LabEx 中练习更多实验来提升你的技能。
