按钮填充动画

CSSCSSBeginner
立即练习

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

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

简介

在本实验中,我们将学习如何使用 CSS 为按钮创建悬停时的填充动画。我们将使用 :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`") subgraph Lab Skills css/selectors -.-> lab-35176{{"`按钮填充动画`"}} css/colors -.-> lab-35176{{"`按钮填充动画`"}} css/margin_and_padding -.-> lab-35176{{"`按钮填充动画`"}} css/borders -.-> lab-35176{{"`按钮填充动画`"}} css/backgrounds -.-> lab-35176{{"`按钮填充动画`"}} css/pseudo_classes -.-> lab-35176{{"`按钮填充动画`"}} css/transitions -.-> lab-35176{{"`按钮填充动画`"}} end

按钮填充动画

虚拟机中已提供 index.htmlstyle.css

要创建悬停时的填充动画,你可以设置 颜色背景 属性,并应用适当的 过渡 来为更改设置动画。要在悬停时触发动画,使用 :hover 伪类来更改元素的 背景颜色 属性。以下是一个示例代码片段:

<button class="animated-fill-button">提交</button>
.animated-fill-button {
  padding: 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
  transition: 0.3s all ease-in-out;
}

.animated-fill-button:hover {
  background: #000;
  color: #fff;
}

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

总结

恭喜你!你已完成按钮填充动画实验。你可以在 LabEx 中练习更多实验以提升你的技能。

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