css3轮播效果，然后里面的动画是怎么实现

html-css036

css3轮播效果，然后里面的动画是怎么实现,第1张

其实是这样的。轮播图其实是一张很宽的图片，根据所在div设置宽度分成几张图片拼接起来的图片。当切换的时候，js移动该div层的背景图片位置也就是操作 CSS的 background-position 属性，来达到看起来好像轮播的效果

1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。

2、这里是html文件，引入css和html代码文件，如图所示。

3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。

4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。

5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。