/* 
轮播图demo
*/
.banner-container{
    width:1200px;
    height:400px;
    margin:0px auto;
    position:relative;
    overflow: hidden;/*用于隐藏超出展示容器的内容部分*/
}
.banner-image-container{
    width:6000px;
    height:400px;
    margin:0px auto;
    animation:text 30s infinite  linear;
    font-size:0px;/*消除图片间隔*/
    
}
.banner-image-container img{
    width:1200px;
    height:400px;
    float:left;
}

/* 轮播图关键帧 */
@keyframes text {          /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
    0%,10%{
        /* margin-left:0px; */
        transform: translateX(0px);
    }
    20%,30%{
        /* margin-left:-1200px; */
        transform: translateX(-1200px);
    }
    40%,50%{
        /* margin-left:-2400px; */
        transform: translateX(-2400px);
    }
    60%,70%{
        /* margin-left:-3600px; */
        transform: translateX(-3600px);
    }
    80%,90%{
        /* margin-left:-4800px; */
        transform: translateX(-4800px);
    }
    100%,110%{
        /* margin-left: 0px; */
        transform: translateX(0px);
    }
}




.circle{
    width:120px; 
    height:120px; 
    border-radius:50%; 
    overflow:hidden;
    }
    .circle > img{
    width: 100%;
    height: 100%;
    }