按钮收缩动画教程

简介

在本实验中，我们将探索如何使用 CSS 创建一个按钮收缩动画。本实验的目的是帮助你理解如何使用 :hover 伪类和 transition 属性，以便在用户将鼠标悬停在按钮上时创建一个流畅且视觉上吸引人的动画。在本实验结束时，你将很好地理解如何使用 CSS 创建简单而有效的动画。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 92%。获得了学习者 100% 的好评率。

按钮收缩动画

虚拟机中已经提供了 index.html 和 style.css。

要为某个元素创建悬停时的收缩动画，你可以使用适当的 transition 属性来为变化添加动画效果，并使用 :hover 伪类来触发动画。例如，如果你想在用户悬停在一个类名为 button-shrink 的按钮上时使其收缩，你可以添加如下 CSS：

.button-shrink {
  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-shrink:hover {
  transform: scale(0.8);
}

这将在按钮发生变化时为其所有属性应用过渡效果，并且当用户悬停在按钮上时，按钮会缩小到其原始大小的 80%。该按钮的 HTML 代码如下：

<button class="button-shrink">Submit</button>

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了按钮收缩动画实验。你可以在 LabEx 中练习更多实验来提升你的技能。