* {
margin:0;
padding:0;
}
#box {
margin:0 auto;
height:300px;
width:500px;
overflow:hidden;
position:relative;
}
.advs {
width:2500px;
list-style:none;
float:left;
position:absolute;
transition:left 1s;
}
.advs li {
float:left;
}
.icons {
width:300px;
position:absolute;
left:calc(50% - 150px);
bottom:8px;
text-align:center;
}
.icons > li {
border-radius:50%;
display:inline-block;
/*即可以设置宽高,又变成了行级标签,而且标签之间的换行会转换成空格*/
width:20px;
height:20px;
background:rgba(150,150,152,0.5);
margin:0 5px;
}
.icons > li.curr {
background:#99cc99;
}