用css实现幻灯片播放是最基础的，闲下来没事就试着写了一下，如果有不够完善或者方法不好的地方还请指点。下面我就用两种方法实现css花灯片效果。
方法1：定位。通过position属性改变left值
html代码：
<section id=box> ?<ul> ???<li>1</li> ???<li>2</li> ???<li>3</li> ???<li>4</li> ???<li>1</li> ?</ul></section>
css代码：
<style> ???* { ?????margin: 0; ?????padding: 0; ?????font-family: 微软雅黑; ?????list-style: none; ???} ???#box{ ???????width:400px; ???????height:200px; ???????border: 1px solid #000; ???????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; ?????} ?????????25%{ ???????????left:-400px; ?????????} ?????????50%{ ???????????left:-800px; ?????????} ?????????75%{ ???????????left:-1200px; ?????????} ?????????100%{ ???????????left:-1600px; ?????????} ???}
</style>
方法2:2D转换。通过transfrom属性
html代码：
<section id=box> ?<ul> ???<li>1</li> ???<li>2</li> ???<li>3</li> ???<li>4</li> ???<li>1</li> ?</ul></section>
css代码：
<style> ???* { ?????margin: 0; ?????padding: 0; ?????font-family: 微软雅黑; ?????list-style: none; ???} ???#box{ ???????width:400px; ???????height:200px; ???????border: 1px solid #000; ???????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)} ?????25%{transform: translateX(-400px)} ?????50%{transform: translateX(-800px)} ?????75%{transform: translateX(-1200px)} ?????100%{transform: translateX(-1600px)}} ?</style>以上两种方法是我想到最简单的方法，如果有更好的方法还请朋友们留言指教。
css实现幻灯片播放效果
原文地址：https://www.cnblogs.com/sdcs/p/8283824.html