纯css实现轮播图banner自动轮换效果

话不多说 直接上代码

* {
            m arg in: 0;
            padding: 0;
        }

        .cont ai ner {
            mar gin :300px auto;
            h ei ght: 400px;
            width: 1146px;
            overflow: hidden;
        }

        /* .wrap */
        .wrap {
            pos IT ion: relative;
            width:10000px;
            left: 0px;
            animation: ani MATE  img  ease 5s infinite normal;
        }

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

        /* 动画 */
        @keyfr am es 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>

到此这篇关于纯css实现轮播图banner自动轮换效果的 文章 就介绍到这了,更多相关css实现轮播图banner自动轮换内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 纯css实现轮播图banner自动轮换效果 全部内容，希望文章能够帮你解决 纯css实现轮播图banner自动轮换效果 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于纯css实现轮播图banner自动轮换效果的详细内容...