用css3制作轮播效果主要是用动画和溢出隐藏效果而成，利用动画效果向左边不断平移，最终自动生成轮播动画。
实现效果还是很容易的，只需要五步。具体代码如下。
首先，先是bady代码块，用ul li标签放入五张图
<body> <div id="box"> <ul> <li> <img src="./img/1.jpg" alt=""> </li> <li> <img src="./img/2.jpg" alt=""> </li> <li> <img src="./img/1.jpg" alt=""> </li> <li> <img src="./img/2.jpg" alt=""> </li> <li> <img src="./img/1.jpg" alt=""> </li> </ul> </div> </body>之后是css样式，先说说实现过程：
1.#box 外盒子设置轮播盒子宽高，多余部分溢出隐藏。 2，ul 控制整个轮播宽度，宽度为所有轮播图片加起来。animation执行动画 3，li 内部进行浮动处理，宽度和轮播一样，消除圆点样式 4，img 和单个轮播图宽高相等。 5. 动画效果: 多少图片设多少帧，translateX向左平移 (有5张图片，轮播一次向左平移百分之20)
<style> * { margin: 0; padding: 0; } /* 设置轮播的宽高，溢出隐藏 */ #box { margin: 100px auto; width: 500px; height: 200px; overflow: hidden; } /* ul宽为所有轮播的宽 启动动画效果 */ #box ul { width: 500%; animation: s 10s infinite; } /* 设置li的宽与box一致，清除无序列表圆点样式，浮动*/ #box ul li { width: 500px; list-style: none; float: left; } /* 图片宽高一致 */ #box ul li img { width: 100%; height: 100%; } /* 往左边平移百分比用平分每一张图*/ @keyframes s { 0% { transform: translateX(0); } 25% { transform: translateX(-20%); } 50% { transform: translateX(-40%); } 75% { transform: translateX(-60%); } 100% { transform: translateX(-80%); } } </style>执行效果如下
