css实现轮播图banner自动轮换效果代码示例

本篇文章小编给大家分享一下css实现轮播图banner自动轮换效果代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

代码如下：

* {
            margin: 0;
            padding: 0;
        }

        .container {
            margin:300px auto;
            
            
            overflow: hidden;
        }

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

        /* 图片大小 */
        .wrap img {
            
            float: left;
            
            display: block;
        }

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

            20% {
                left: -0px;
            }

            40% {
                left: -1146px;
            }

            60% {
                left: -2292px;
            }

            80% {
                left: -3438px;
            }

            100% {
                left: 0px;
            }
        }

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