CSS3图片自动滚动效果

css 的图片自动滚动效果，挺适合用在横幅广告、产品展示这些地方。尤其是那种不想动手点的情况，用个自动轮播效果刚刚好。简单用个@keyframes配上transform: translateX，几行 CSS 就能搞定，页面一下就活了。

关键帧动画是这招的核心，定义一个循环位移的过程，就能让图片一张接一张地滑出来。像这样：

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

加个animation属性就能动起来，比如：

.carousel {
  animation: scroll 20s linear infinite;
}

你还可以加点:hover来做交互，比如鼠标移上去暂停滚动，体验更顺滑。想搞复杂点的，像方向控制、暂停播放，那就得上 JavaScript，setInterval配事件监听，配合得好，比你点手动切换还自然。

懒得自己撸？Bootstrap 的 Carousel组件直接套就行，还有不少现成的插件可以参考，比如：

• JavaScript 版图片旋转木马
• jQuery 宽屏图片轮播
• 3D 旋转木马效果

对了，别忘了加上响应式，不然在手机上直接溢出画面。加几条@media规则，设个百分比宽度，问题不大。

如果你想快速上手、改改就能用，可以先从这个 keyframes 动画看起，效果清爽，逻辑清晰，适合新手练手。