怎样用纯css做出轮播图效果

    
        
        
        
             #frame{position:absolute;width:302px;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;background-color:red;border-left:1px solid blue;}
                    #photos {  position: absolute;z-index:9;  width: calc(301px * 4);/*---修改图片数量的话需要修改下面的动画参数*/  }
                    .play{ animation: ma 5s 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;    }

                    }