HTML代码:
ABC
CSS代码:.pic-switch{
width: 500px;
height: 300px;
margin: 0px auto;
border: 5px solid #CCCCCC;
border-radius: 5px;
overflow: hidden;
}
.pic-switch .pic{
background-color: #009688;
height: 100%;
width: 100%;
text-align: center;
display: table;
}
.pic-switch .pic span{
color: #FFFFFF;
font-size: 60px;
display: table-cell;
vertical-align: middle;
}
.pic-switch .pic:nth-child(2){
background-color: #5FB878;
}
.pic-switch .pic:nth-child(3){
background-color: #FF5722;
}
.pic{
animation: one 12s linear 0s infinite normal;
position: relative;
}
@keyframes one{
0%,30% {
top: 0px;
}
35%,65% {
top: -300px;
}
70%,100% {
top: -600px;
}
}
效果截图: