jQuery CSS3图片依次缩放动画效果

jQuery 配合 CSS3 做图片动画，还是挺顺手的。像这种图片一个个放大再缩小的效果，视觉冲击感挺强，尤其适合做首页展示区、作品集之类的。你只要把每张图片包在一个div里，用 CSS 设好初始样式，再用 jQuery 加个延时动画，图片就会一个接一个地动起来，看着还蛮带感的。

HTML 结构比较简单，每个图片放在.image-container里，便于后面用each去控制。CSS 里重点是用transform: scale和transition搞定缩放和平滑过渡。关键是写得简洁，效果也不差。

动画触发靠setTimeout，给每张图加点延迟，就能实现依次动画。.zoom-in是放大，.zoom-out可以还原状态，配合得好，效果自然又不生硬。记得设置transition时间，不然会跳一下。

这种方式比较适合需要吸引注意力的场景，比如电商首页、摄影作品展示页，或者你想来点“仪式感”的加载动画。如果想玩出更多花样，可以看看下面这几个资源，还蛮有启发的：

• css3 图片放大缩小切换幻灯片效果
• jquery 图片放大缩小效果
• jquery.easing 插件图片放大缩小动画效果
• jQuery 加 CSS3 图片遮罩和过渡动画效果

如果你正好想给页面加点动态氛围，这种方法还挺值得一试的，代码量也不多，响应也快。