CSS3是一个强大的web技术,诞生了许多有趣的动画效果。今天我们来分享一个关于CSS3按钮缩放动画的案例。
.btn {
background-color: #450794;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
transition: transform 0.2s ease-in-out;
}
.btn:hover {
transform: scale(1.1);
} 上面的代码是一个基本的按钮类样式。我们设置了按钮的背景色、颜色、内边距和圆角。同时,通过CSS3的过渡特性,我们发现在hover状态下添加了 transform: scale(1.1),它可以让按钮在hover时缩放1.1倍。
这个效果非常简单,但是又非常有趣!在实际应用中,你可以使用这种效果来增强网站的用户体验或者使一些呆板的元素变得活跃起来。
以上是一个简单的CSS3按钮缩放动画实现案例,希望对你有所帮助。