黑松山资源网 Design By www.paidiu.com

话不多说 直接上代码

* {
            margin: 0;
            padding: 0;
        }

        .container {
            margin:300px auto;
            height: 400px;
            width: 1146px;
            overflow: hidden;
        }

        /* .wrap */
        .wrap {
            position: relative;
            width:10000px;
            left: 0px;
            animation: animateImg ease 5s infinite normal;
        }

        /* 图片大小 */
        .wrap img {
            width: 1146px;
            float: left;
            height: 400px;
            display: block;
        }

        /* 动画 */
        @keyframes animateImg {
            0% {
                left: 0px;
            }

            20% {
                left: -0px;
            }

            40% {
                left: -1146px;
            }

            60% {
                left: -2292px;
            }

            80% {
                left: -3438px;
            }

            100% {
                left: 0px;
            }
        }

动画效果像素根据自己图片大小修改

<div class="container">
        <div class="wrap">
            <img src="images/banner1.jpg"alt="" />
            <img src="images/banner2.jpg"alt="" />
            <img src="images/banner3.jpg"alt="" />
            <img src="images/banner4.jpg"alt="" />
        </div>
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com