[分享]css3按钮放大缩小动画效果

CSS3作为一种优秀的前端技术，不仅可以制作出美观的网页效果，而且可以为网页增添动态感。今天，我们来介绍一种利用CSS3制作的按钮放大缩小动画效果。.btn { width: 200px; heigh...

CSS3作为一种优秀的前端技术，不仅可以制作出美观的网页效果，而且可以为网页增添动态感。今天，我们来介绍一种利用CSS3制作的按钮放大缩小动画效果。

.btn {
    width: 200px;
    height: 50px;
    font-size: 20px;
    color: #fff;
    background-color: #007bff;
    border-radius: 5px;
    box-shadow: 0 5px 0 #006acd;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.btn:hover {
    transform: scale(1.2);
    box-shadow: 0 10px 0 #006acd;
}

以上是我们制作这种效果所需要的CSS代码。首先我们定义了一个按钮，设置了按钮的样式：宽度、高度、字体大小、字体颜色、背景颜色、圆角、阴影等等。关键在最后一行代码，我们设置了过渡效果，它使得鼠标悬停在按钮上时，改变的过程更加流畅。

接下来，我们在:hover伪元素中设置了transform属性，它使得按钮在鼠标悬停时缩放1.2倍的大小。同时，也改变了按钮阴影的位置，营造出一个渐变的动态效果。

总的来说，这种按钮放大缩小动画效果非常简单易学，而且可以应用到各种网站的按钮上，让网页更具动感。希望本篇文章对大家有所帮助，谢谢阅读！