[分享]css3实现图片一直放大缩小

CSS3提供了丰富的动画特效功能，其中之一就是实现图片的放大缩小效果。这个特效可以让图片动态地变小或变大，非常适合用于产品展示、品牌宣传和网站导航等场合。.img{ width: 100px; hei...

CSS3提供了丰富的动画特效功能，其中之一就是实现图片的放大缩小效果。这个特效可以让图片动态地变小或变大，非常适合用于产品展示、品牌宣传和网站导航等场合。

.img{
    width: 100px;
    height: 100px;
    transition: all 0.5s ease-in-out;
}
.img:hover{
    width: 150px;
    height: 150px;
} 

如上所示，我们首先设置图片的宽高，然后使用transition属性来控制动画效果，其中all表示所有属性都进行动画过渡，0.5s表示动画过渡时间为0.5秒，ease-in-out表示过渡的速度是先加速后减速。

接着，我们使用:hover伪类来触发鼠标移上事件，当鼠标移上时，图片的宽高将从原来的100px变成150px，由于设置了过渡效果，所以图片的大小会平滑过渡，展现出生动有趣的效果。

这样，我们就成功地实现了图片的放大缩小特效，可以运用到网页设计中，为网站增添更多的魅力和动态。