css动画属性--轮播图效果

通过css的动画属性实现轮播图的显示效果

代码如下:

主体部分:

<div id="move">
        <ul>
            <li><img src="data:images/1.jpg" alt=""></li>
            <li><img src="data:images/2.jpg" alt=""></li>
            <li><img src="data:images/3.jpg" alt=""></li>
            <li><img src="data:images/4.jpg" alt=""></li>
            <li><img src="data:images/1.jpg" alt=""></li>
　　　　</ul> 
</div>

div作为视窗位置和大小

ul和li作为布局的样式定位到div视窗位置

最后一张图片起到衔接和无缝过渡的效果

css样式部分:

<style>
    * {
        margin:;
        padding:;
    }
 
    #move {
        width: 400px;
        height: 300px;
        margin: 200px;
        border: 4px solid red;
        overflow: hidden;
        position: relative;
    }
 
    ul {
        width: 2000px;
        position: absolute;
        left:;
        top:;
        animation: move 10s ease 0s infinite normal;
    }
 
    li {
        float: left;
    }
 
    @keyframes move {
        0% {
            left: 0px;
        }
        25% {
            left: -400px;
        }
        50% {
            left: -800px;
        }
        75% {
            left: -1200px;
        }
        100% {
            left: -1600px;
        }
    }
    </style>

如有不足,虚心请教