通过css3和div实现图片轮播,不用应用js和jquery,避免一些网站不兼容的问题,代码量小,方便操作。
@keyframes ma {
0%,25% {margin-left: 0px;}
30%,50% {margin-left: -300px;}
55%,75% {margin-left: -600px;}
80%,100% {margin-left: -900px;}
}
更改图片大小时,更改图片的宽高和此处代码即可。
#photos {
position:absolute;
z-index:9;
width:calc(300px * 4);
}
.play {
animation:ma 20s ease-out infinite alternate;
}
修改滚动的速度