HTML+css图片轮播

标签：hid   absolute   循环   超出   float   不显示   net   mat   city   

<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>

HTML+css图片轮播

标签：hid   absolute   循环   超出   float   不显示   net   mat   city   

原文地址：https://www.cnblogs.com/ince/p/13790135.html