html轮播图片在线制作教程,纯html_css实现图片轮播

#frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}

#dis{position:absolute;left:-50px;top:-10px;opacity:.5}

#dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}

#photos img{float:left;width:300px;height:200px}

#photos { position: absolute;z-index:9; width: calc(300px * 4);/*---修改图片数量的话需要修改下面的动画参数*/ }

.play{ animation: ma 20s ease-out infinite alternate;}

@keyframes ma {

0%,25% { margin-left: 0px; }

30%,50% { margin-left: -300px; }

55%,75% { margin-left: -600px; }

80%,100% { margin-left: -900px; }

}

• 111111111111111
• 22222222222222
• 33333333333333
• 44444444444444

来源：https://www.cnblogs.com/liadmin/p/6442378.html