昆山网站优化 > 网站教程 > DIV+CSS教程 > 纯css实现轮播图banner自动轮换效果

DIV+CSS教程文章

SEO下载

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

轮播图banner>
纯css实现轮播图banner自动轮换效果
 
这篇文章主要介绍了纯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自动轮换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持昆山知道网络!
昆山文章网络是一家专业搜索引擎排名优化公司,专注与企业网站seo优化,网站排名优化,百度关键词优化;提供seo培训,seo教程;10年专注SEO算法,千家网站SEO经验,为企业提供全方位网络推广,网站运营,网络营销方案
嘿,我来帮您!