全屏图片轮播图案例代码
图片轮播图案例代码:
HTML代码:
<div class="box"><div class="big">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div></div>
CSS代码:
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 300px;
border: 2px solid blue;
overflow: hidden;/*溢出隐藏*/
}
.big{
width: 500%;
height: 300px;
border: 1px solid orange;
animation: move 5s infinite alternate steps(5);
}
.big p{
width: 20%;
height: 300px;
background-color: deepskyblue;
font-size: 60px;
color: white;
float: left;
text-align: center;
line-height: 300px;
}
@keyframes move {
from{
margin-left: 0px;
}
to{
margin-left: -500%;
}
}
</style>
共有 0 条评论