<html><head> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????* { ???????????margin:0; ???????????padding:0; ???????} ???????ul { ???????????ist-style:none; ???????} ???????#wrap { ???????????width:600px; ???????????height:400px; ???????????margin:30px auto; ???????????border:1px solid #9cc5ef; ???????????overflow:hidden; ???????} ???????#slider { ???????????width:300%; ???????????height:100%; ???????????font:100px/400px Microsoft Yahei; ???????????text-align:center; ???????????color:#fff; ???????????margin-left:0; ???????????-webkit-animation:slide1 10s linear infinite; ???????} ???????#slider li { ???????????float:left; ???????????width:600px; ???????????height:100%; ???????} ???????#slider li:nth-child(1) { ???????????background:#6bacef; ???????} ???????#slider li:nth-child(2) { ???????????background:#297cd3; ???????} ???????#slider li:nth-child(3) { ???????????background:#01254a; ???????} ???????/*创建三种动画策略*/ ???????@-webkit-keyframes slide1 { ???????????0% { margin-left:0;} ???????????23% { margin-left:0;} ???????????33% { margin-left:-600px;} ???????????56% { margin-left:-600px;} ???????????66% { margin-left:-1200px;} ???????????90% { margin-left:-1200px;} ???????????100% {margin-left:0;} ???????} ???</style></head><body><div id="wrap"> ???<ul id="slider"> ???????<li>1</li> ???????<li>2</li> ???????<li>3</li> ???</ul></div></body></html>CSS实现简易的轮播图
原文地址：https://www.cnblogs.com/94pm/p/9648055.html