学习笔记三

用html+css实现轮播图

html部分：

    <div class="slide">
        <ul class="lunbo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

css部分

.slide{
    position: relative;
    margin: auto;
    width: 400px;
    height: 400px;
    text-align: center;
    overflow: hidden;
}
ul{
    margin: 10px 0;
    padding: 0;
    width: 10000px;
    transition: all 0.5s;
}
.slide .lunbo{
    animation: marginleft 10.5s infinite;
}
.slide li{
    float: left;
    width: 400px;
    height: 400px;
    list-style: none;
    line-height: 200px;
}
.slide li:nth-child(1){
    background-color: black;
}
.slide li:nth-child(2){
    background-color: burlywood;
}
.slide li:nth-child(3){
    background-color: coral;
}
@keyframes marginleft {
    0%{
        margin-left: 0;
    }
    33%{
        margin-left: -400px;
    }
    66%{
        margin-left: -800px;
    }
    95%{
        margin-left: -1200px;
    }
    100%{
        margin-left: 0;
    }
}

但是基本可以实现，效果还有点瑕疵