简介
在本实验中,我们将学习如何使用 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