CSS for slideshow playback effects

The use of CSS to achieve slideshow is the most basic, idle nothing to try to write a bit, if there is not perfect or the method is not good place also please pointing. Below I will use two methods to achieve the effect of CSS lantern.

Method 1: locate. Changing the left value with the Position property

HTML code:

<section id=box>  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>1</li >  </ul></section>

CSS code:

<style> *{margin:0; padding:0; Font-family: Microsoft ya black; List-Style:none;        } #box {width:400px;        height:200px; border:1px Solid # the;        margin:50px Auto;        position:relative;    Overflow:hidden;        } ul{width:2000px;        Position:absolute; Top:0; Left:0;    Animation:dh 10s infinite Ease;      } ul li{width:400px;      height:200px; float: Left; } ul Li:nth-child (1) {background: #4b86db; } ul Li:nth-child (2) {background: #ff9999; } ul Li:nth-child (3) {background:olivedrab; } ul Li:nth-child (4) {background:skyblue; } ul Li:nth-child (5) {background: #4b86db; } @keyframes DH {0%{left:0px; }           -%{left:-400px; }           -%{left:-800px; }           the%{left:-1200px; }           -%{left:-1600px; }    }
</style>

method 2:2d Conversion. through the Transfrom property

HTML code:

<section id=box>  <ul>    <li>1</li>    <li>2</li >    <li>3</li>    <li>4</li>    <li>1 </li>  </ul></section>

CSS code:

<style> *{margin:0; padding:0; Font-family: Microsoft ya black; List-Style:none;        } #box {width:400px;        height:200px; border:1px Solid # the;        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 (1) {background: #4b86db; } ul Li:nth-child (2) {background: #ff9999; } ul Li:nth-child (3) {background:olivedrab; } ul Li:nth-child (4) {background:skyblue; } ul Li:nth-child (5) {background: #4b86db; } @keyframes DH {0%{transform:translatex (0)}       -%{transform:translatex (-400px)} -%{transform:translatex (-800px)} the%{transform:translatex (-1200px)} -%{transform:translatex (-1600px)}}</style>

The above two methods are I think the simplest way, if there is a better way to ask friends to comment.

CSS for slideshow playback effects