css3轮播图

<div id="banner">
  <div id="banner_img">
      <img src="img/11.jpg" alt="">        //图片可替换
    <img src="img/22.jpg" alt="">
    <img src="img/33.jpg" alt="">
  </div>
</div>

<style type="text/css">
    #banner{
      width: 600px;
      height: 320px;
      overflow: hidden;
    }
    #banner_img{
      width: 1800px;        //图片数量*每张图片的宽度
      height: 320px;
      animation:move 5s infinite;        //动画移动五秒infinite无限循环
    }
    img{
      width: 600px;       //单张图片宽度
      height: 320px;        //单张图片高度
      float: left;
    }
    @keyframes move{        //帧数100%除以图片数量即可
      0%,25%{
          margin-left: 0px;
      }
      35%,60%{
        margin-left: -600px;
      }
      70%,100%{
        margin-left: -1200px;
      }
    }
</style>