* { margin:0px; padding:0px; } #banner { width:100%; height:500px; overflow:hidden; } .banner { width:400%; height:500px; animation:banner 10s ease infinite; } .banner1,.banner2,.banner3 { width:25%; height:500px; overflow:hidden; float:left; } .banner1 img,.banner2 img,.banner3 img { width:1920px; height:500px; position:relative; left:50%; margin-left:-960px; } @keyframes banner { 0% { margin-left:0px; } 34% { margin-left:0px; } 39% { margin-left:-100%; } 64% { margin-left:-100%; } 69% { margin-left:-200%; } 94% { margin-left:-200%; } 99% { margin-left:-300%; } 100% { margin-left:-300%; }
简单,实用,通俗,易懂