当前位置:首页 >  IDC >  服务器 >  正文

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

 2020-10-15 11:17  来源: 脚本之家   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

话不多说 直接上代码

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

文章来源:脚本之家,原文链接:https://www.jb51.net/css/745175.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
网站建设

相关文章

  • 外贸商城网站建设哪家好 三大知名外贸商城综合对比

    随着国际化贸易的融合以及国家对外贸的支持,外贸电商越来越火,让商品出海已经是不少中大型企业的战略性布局。虽然自建站会比SaaS有着灵活扩展的优势,但如何解决商品出海横跨在企业和用户眼前的语言难题,是不少企业需要考虑的一个核心点。

    标签:
    网站建设
  • 网站建设常用的建站系统推荐

    网站建设已经很是普及的事情,稍微注重网络宣传的企业或单位都会有自己的网站,网站建设是一个比较复杂的过程,特别是对于非专业的人员来说,所以很多新手有网站建设需求,最先想到的是找本地一家网站建设公司来承建

    标签:
    网站建设
  • 自动化建站优化+卖站,看起来是个好生意

    这几天在站长论坛看到有人交流自动化建站然后SEO优化,最后在已3K+左右的价格卖出。看这确实让人热血沸腾,想马上开始行动起来,其实我个人觉得这里面还是有很多难点的。

    标签:
    网站建设
  • 网站建设过程中容易被忽略的元素是什么?

    网站从建设到真正运营,会忽略很多元素。其实一个网站能否达到预期的效果,网站建设与网站优化做好的同时,很关键一点,客户自身的问题。比如我们帮企业建设网站,网站提供的主要服务还是掌握在客户手上。下面笔者谈谈网站建设过程中容易被忽略的元素。详情看下文

    标签:
    网站建设
  • 网站建设完成后还有哪些工作要做呢?

    这篇文章主要介绍了网站建设完成后还有哪些工作要做呢?如果网站建设图图便宜,那么后续服务将没有保障,试想一下,大街上的便宜货可没有后期更换、后期指导等,下边我们着重来分析网站建设后期可能出现的问题,需要的朋友可以参考下

    标签:
    网站建设

热门排行

信息推荐