css实现幻灯片播放效果

用css实现幻灯片播放是最基础的，闲下来没事就试着写了一下，如果有不够完善或者方法不好的地方还请指点。下面我就用两种方法实现css花灯片效果。

方法1：定位。通过position属性改变left值

html代码：

<section id=box>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

css代码：

<style>
    * {
      margin: ;
      padding: ;
      font-family: 微软雅黑;
      list-style: none;
    }
    #box{
        width:400px;
        height:200px;
        border: 1px solid #;
        margin: 50px auto;
        position:relative;
        overflow: hidden;
    }
    ul{
        width: 2000px;
        position: absolute;
        top:;
        left:;
      animation: dh 10s infinite ease;
    }
    ul li{
      width:400px;
      height:200px;
      float: left;

    }
    ul li:nth-child(){
      background:#4b86db;
    }
    ul li:nth-child(){
      background:#ff9999;
    }
    ul li:nth-child(){
      background:olivedrab;
    }
    ul li:nth-child(){
      background:skyblue;
    }
    ul li:nth-child(){
      background:#4b86db;
    }
        @keyframes dh {
          %{
            left:0px;
      }
          %{
            left:-400px;
          }
          %{
            left:-800px;
          }
          %{
            left:-1200px;
          }
          %{
            left:-1600px;
          }
    }
</style>

方法2:2D转换。通过transfrom属性

html代码：

<section id=box>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

css代码：

<style>
    * {
      margin: ;
      padding: ;
      font-family: 微软雅黑;
      list-style: none;
    }
    #box{
        width:400px;
        height:200px;
        border: 1px solid #;
        margin: 50px auto;
        overflow: hidden;
    }
    ul{
      width: 2000px;
      animation: dh 10s infinite ease;
    }
    ul li{
      width:400px;
      height:200px;
      float: left;

    }
    ul li:nth-child(){
      background:#4b86db;
    }
    ul li:nth-child(){
      background:#ff9999;
    }
    ul li:nth-child(){
      background:olivedrab;
    }
    ul li:nth-child(){
      background:skyblue;
    }
    ul li:nth-child(){
      background:#4b86db;
    }

@keyframes dh {
      %{transform: translateX()}
      %{transform: translateX(-400px)}
      %{transform: translateX(-800px)}
      %{transform: translateX(-1200px)}
      %{transform: translateX(-1600px)}
}
  </style>

以上两种方法是我想到最简单的方法，如果有更好的方法还请朋友们留言指教。