首页 - 数据 - CSS 中的按钮动画

CSS 中的按钮动画

2023-10-04 10:46

CSS 中的按钮动画是一种非常流行的效果,可以使网页内容更加生动和有吸引力。通常,我们使用CSS的hover和active伪类来实现按钮动画,我们还可以使用CSS3的transition和transform属性来创建更复杂的动画效果。

/* 基本悬停动画 */
。按钮{
显示:内联块;
内边距:10px 20px;
背景颜色:#333;
颜色:#fff;
过渡:全部 0.2 秒缓入缓出;
}
.按钮:悬停{
背景颜色:#444;
}
/* 点击效果 */
.button:active{
背景颜色:#555;
}
/* 更复杂的动画效果 */
.button2{
变换:缩放(1);
过渡:所有 .2 秒缓入缓出;
}
.button2:悬停{
变换:缩放(1.1);
过渡:所有 .2 秒缓入缓出;
}

以上是三种不同的按钮动画。第一个是基本的悬停动画,第二个是点击效果,最后一个是更复杂的缩放效果。我们可以利用这些代码为我们的按钮添加不同的动画效果,让网页更加生动有趣。