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

html-css023

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

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

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

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

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

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

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