Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
	list-style:none;
}
.banner {
	width:640px;
	height:300px;
	overflow:hidden;
	margin:0 auto;
}
.inner {
	width:9999px;
	position:relative;
	animation:aaa 16s infinite 2s running;
}
@keyframes aaa {
	0% {
	transform:translateX(0px);
}
5% {
	transform:translateX(-640px);
}
25% {
	transform:translateX(-640px);
}
30% {
	transform:translateX(-1280px);
}
50% {
	transform:translateX(-1280px);
}
55% {
	transform:translateX(-1920px);
}
75% {
	transform:translateX(-1920px);
}
80% {
	transform:translateX(-2560px);
}
100% {
	transform:translateX(-2560px);
}
}.inner:hover {
	animation-play-state:paused;
	cursor:pointer;
}
.innerwrapper {
	float:left;
	width:640pxpx;
}
.banner img {
	width:640px;
	height:300px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS3实现无缝轮播

利用简单的CSS3原理能够实现之前我们用JS、JQ实现的无缝轮播图

1
      wlrjgzs0
      2018/2/11 11:55:33