CSS3小变大

随着web设计和开发的不断发展，我们可以用CSS3的新属性来实现更复杂的设计效果。其中之一就是CSS3小变大效果。

小变大效果可以用于制作按钮、图片和导航等元素，使它们在鼠标悬浮时变大、显眼。

.btn {
padding: 10px 20px;
font-size: 16px;
background-color: #3F51B5;
color: white;
transition: transform 0.2s ease-in-out;
}
.btn:hover {
transform: scale(1.1);
}

上面的代码是一个按钮的例子。我们给按钮元素添加了一个transform属性，并使用hover伪类来实现鼠标悬浮时触发变形效果。按钮在悬浮时会以1.1倍的比例缩放，制作出变大的效果。

通过这个例子可以看到，实现CSS3小变大效果的方法并不复杂。只要我们合理运用CSS3新属性，就能轻松达到更高的UI设计效果。