css banner滚动,css编写banner轮播

一。先写两个div,把需要轮播的图片放进去

　　　　

　　　　

　　　　

二。外层div规定一块区域,让图片在这片区域显示；内层div把需要显示的图片并排合成一张大图片；主要属性overflow，hidden值使超出范围的内容不显示

.a{

position: absolute;

width: 480px;

height: 270px;

background-color: pink;

overflow: hidden;

}

.b{

position: absolute;

width: 1440px;

height: 100%;

}

.b img{

width: 480px;

height: 100%;

float: left;

}

三。使用animation创造一个动画，通过margin-left移动图片。

.play{

animation: ma 10s 3s infinite;

}

@keyframes ma{

0%{

margin-left: 0px;

}

16%{

margin-left: -480px;

}

32%{

margin-left: -480px;

}

48%{

margin-left: -960px;

}

64%{

margin-left: -960px;

}

80%{

margin-left: 0px;

}

100%{

margin-left: 0px;

}

}

.play:hover{

animation-play-state: paused;

}