<div class="pst">
<div class="pin">
<div style="background-image:url(https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png)"><p>111</p></div>
<div style="background-image:url(https://www.baidu.com/img/flexible/logo/pc/result.png)"><p>222</p></div>
<div style="background-image:url(https://p.ssl.qhimg.com/t010e288a56a0b005e9.png)"><p>333</p></div>
<div style="background-image:url(https://static.ws.126.net/163/f2e/www/index20170701/images/sprite_img20191120.png)"><p>4444</p></div>
</div>
</div>
<style>
.pst {
width:200px; /*焦點圖區域寬*/
height:150px; /*焦點圖區域高*/
overflow:hidden; /*焦點圖區域類似遮罩層，超出部分不顯示*/
position:relative; /*相對定位於內膽*/
}
.pin {
width:800px; /*內膽寬4x200px*/
height:150px; /*內膽高同區域高*/
position:absolute; /*絕對定位*/
animation:jiaodian 20s infinite; /*設置動畫為：jiaodian 播放時間20s infinite循環播放*/
}
.pin div {
float:left; /*圖片浮動起來*/
width:200px; /*圖片寬度同區域寬*/
height:150px; /*圖片高度同區域高*/
background-size:100% 100%; /*背景拉伸*/
}
.pin p {
background:black;
margin:0;
color:#fff;
bottom:0;
position:absolute;
width:100%;
opacity:0.72;
}
@keyframes jiaodian { /*定義動畫幀jiaodian，4張圖，分四個階段，每個階段25%，其中20%靜止，5%過度動畫*/
0%{left:0px;}
20%{left:0px;}
25%{left:-200px;}
45%{left:-200px;}
50%{left:-400px;}
70%{left:-400px;}
75%{left:-600px;}
95%{left:-600px;}
100%{left:0px;}
}
</style>