按钮放大动画

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将学习如何使用 CSS 创建一个在悬停时具有放大动画效果的按钮。此效果可用于为网站或应用程序增添交互性和视觉吸引力。通过应用 transform 属性和 :hover 伪类,我们可以使按钮在用户悬停时放大,从而创建一个微妙而有效的动画。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") subgraph Lab Skills css/selectors -.-> lab-35177{{"`按钮放大动画`"}} css/colors -.-> lab-35177{{"`按钮放大动画`"}} css/margin_and_padding -.-> lab-35177{{"`按钮放大动画`"}} css/borders -.-> lab-35177{{"`按钮放大动画`"}} css/backgrounds -.-> lab-35177{{"`按钮放大动画`"}} css/pseudo_classes -.-> lab-35177{{"`按钮放大动画`"}} css/transitions -.-> lab-35177{{"`按钮放大动画`"}} css/transformations -.-> lab-35177{{"`按钮放大动画`"}} end

按钮放大动画

虚拟机中已经提供了 index.htmlstyle.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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程