网站建设   网站建设技术   网页设计   html/css  

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

人浏览  发布时间:2021-02-05

话不多说 直接上代码 * { 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 infi...
话不多说 直接上代码
 
* {
            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自动轮换效果的文章就介绍到这了
(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图