[分享]css3放大动画样式

CSS3中有很多酷炫的动画效果，其中放大动画是比较常见的一种。本文将为大家介绍一些常用的CSS3放大动画样式。 / 放大效果一 / .transform1{ transition: all .2s e...

CSS3中有很多酷炫的动画效果，其中放大动画是比较常见的一种。本文将为大家介绍一些常用的CSS3放大动画样式。

/* 放大效果一 */
.transform-1{
    transition: all .2s ease-in-out;
    transform: scale(1);
}
.transform-1:hover{
    transform: scale(1.2);
}

/* 放大效果二 */
.transform-2 {
    transition: box-shadow 0.5s ease;
}
.transform-2:hover {
    transform: scale(1.03);
}

/* 放大效果三 */
.transform-3 {
    transition: all 0.3s ease-in-out;
    transform: scale(1);
}
.transform-3:hover {
    transform: scale(1.1);
}

/* 放大效果四 */
.transform-4 {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
}
.transform-4:hover {
    transform: scale(1.15);
}

/* 放大效果五 */
.transform-5 {
    transition: all 0.1s ease-in-out;
    transform: scale(1.1) rotate(-5deg);
}
.transform-5:hover {
    transform: scale(1.2) rotate(-10deg);
} 

以上代码中，`.transform-1`、`.transform-2`、`.transform-3`、`.transform-4`、`.transform-5` 分别代表五种不同的放大动画样式。其中使用了不同的 CSS 属性和参数，可以根据实际场景和需求进行调整。

总之，CSS3放大动画样式可以让网页更加生动有趣，提升用户体验，但也需要适度使用，不要过度使用影响网页性能和用户体验。