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

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

代码如下:

           主体部分:

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

div作为视窗位置和大小

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

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

css样式部分:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #move {
        width: 400px;
        height: 300px;
        margin: 200px;
        border: 4px solid red;
        overflow: hidden;
        position: relative;
    }
    
    ul {
        width: 2000px;
        position: absolute;
        left: 0;
        top: 0;
        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>

如有不足,虚心请教

转载于:https://www.cnblogs.com/caoruichun/p/7210748.html