全国服务热线:4008-888-888

技术知识

纯css完成滚屏图banner☏全自动轮换实际效果

话很少说 立即上编码

* {
            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>

到此这篇有关纯css完成滚屏图banner全自动轮换实际效果的文章内容就详细介绍到这了,大量有关css完成滚屏图banner全自动轮换內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服