* { 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; }
利用简单的CSS3原理能够实现之前我们用JS、JQ实现的无缝轮播图