html：
1
2
3
1【21.css3轮播效果】css：
.div_first{
width: 1000px;
height: 80px;
margin-top: 100px;
margin-left : 250px;
overflow: hidden;
}
.div_second{
width: 4000px;
position: relative;
animation : myimg 6s ease-in-out infinite;
font-size : 0;
}
.item {
width: 1000px;
height: 80px;
text-align: center;
line-height : 80px;
display: inline-block;
font-size: 20px;
border: 1px solid;
box-sizing: border-box;
}
@keyframes myimg{
/* 第一帧 */
0%{
left: 0;
}
23.3% {
left: 0;
}
33.3% {
left: -1000px;
}
/* 第二帧 */
56.6%{
left: -1000px;
}
66.6%{
left: -2000px;
}
/* 第三帧 */
90%{
left: -2000px;
}
100%{
left: -3000px;
}
/* 第四帧:第四帧不用写, 因为它已经是第一帧的内容了 */
}
查看效果
