首页 > > 网页制作 > css >

纯CSS3实现轮播图

2018-06-24 01:56:48来源：未知阅读 ()

前言

　　纯css3实现的轮播图效果，和JavaScript控制的相比，简单高效了很多，但是功能也更加单一，只有轮播不能手动切换。

　　用什么实现的呢？页面布局 + animation动画

HTML部分

<div class="container">
    <div class="title-container">
      <h1>纯CSS3轮播图</h1>
    </div>
    <div class="slide-box">
      <ul>
        <li class="slide-item slide1">
          <a href="#">
          <img src="images/img-1.jpg" alt="">
          <div class="tooltip">
            生活
          </div>
          </a>
        </li>
        <li class="slide-item slide2">
          <a href="#">
          <img src="images/img-2.jpg" alt="">
          <div class="tooltip">
            热情
          </div>
          </a>
        </li>
        <li class="slide-item slide3">
          <a href="#">
          <img src="images/img-3.jpg" alt="">
          <div class="tooltip">
            乐观
          </div>
          </a>
        </li>
        <li class="slide-item slide4">
          <a href="#">
          <img src="images/img-4.jpg" alt="">
          <div class="tooltip">
            美好
          </div>
          </a>
        </li>
        <li class="slide-item slide5">
          <a href="#">
          <img src="images/img-5.jpg" alt="">
          <div class="tooltip">
            意义
          </div>
          </a>
        </li>
      </ul>
      <div class="progress">

      </div>
    </div>
  </div>
</body>

View Code

　　html部分也还是那些东西，容器+多张轮播图子项

布局部分

/*reset*/
html,body,div,ul,li,img,h1,a{
  margin: 0;
  padding: 0;
}

ul{
  list-style: none;
}


/*slide style*/

html,body{
  width: 100%;
  height: 100%;
}

body{
  background: url('./../images/bg.png') repeat;
}

.container{
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}

.container .title-container{
  width: 800px;
  height: 100px;
  line-height: 100px;
  margin: 20px auto;
  text-align: center;
}

.slide-box{
  position: relative;
  width: 800px;
  height: 533px;
  margin: 0 auto;
  border:5px solid #eaeaea;
    -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.7);
            box-shadow:1px 1px 5px rgba(0,0,0,0.7);
}

.slide-box ul{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide-box ul li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.slide-box ul li .tooltip{
  position: absolute;
  left: 50px;
  top: -40px;
  height: 40px;
  width: 100px;
  text-align: center;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  line-height: 40px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.slide-box ul li:hover .tooltip{
  top: 2px;
  z-index: 2;
}

View Code

　1、容器溢出隐藏

　2、轮播子项绝对定位

轮播动画部分

　这部分才是本文的重点。

　用纯css3实现轮播，肯定要无限循环使用animation动画，而且需要单独控制每个子项的动画效果，而其整体效果是完美的轮播效果。

　子项使用的是绝对定位，需实现的轮播效果是从左至右，所以可以控制left的值达到展示和隐藏（定位到容器之外即隐藏）及滑动效果。先实现第一个子项

.slide-box ul li.slide1{
  -webkit-animation: slide1 25s linear infinite; 
          animation: slide1 25s linear infinite;
}

@-webkit-keyframes slide1 {
  0%  {
    left: 0;
    opacity: 1;
  }
  16%  {
    left: 0;
    opacity: 1;
  }
  20%  {
    left: 800px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  95% {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  96% {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  100% {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
}

　　设计轮播周期为25s，所以每个子项有5s的展示和移动时间。子项一的动画效果：0-4s展示，4-5s向右方滑动至容器外隐藏，之后迅速滑倒容器左边外隐藏（此时修改了z-index，所以不会影响到正在展示的子项），剩下的时间就是在左边等待下次滑动及展示了。第二个子项的动画效果需与第一个子项契合，特别在时间上，这样整体的效果才会好。如下：

.slide-box ul li.slide2{
  -webkit-animation: slide2 25s linear infinite;
          animation: slide2 25s linear infinite;
}

@-webkit-keyframes slide2 {
  0%  {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  16%  {
    left: -800px;
    opacity: 0;
    z-index: 1;
  }
  20%  {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
  36% {
    left: 0;
    opacity: 1;
    z-index: 1;
  }
  40% {
    left: 800px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
  100% {
    left: -800px;
    opacity: 0;
    z-index: 0;
  }
}

　　第二个子项 1-4s在容器左边外等待，4-5s向右滑出展示（此时第一个子项向左滑出隐藏），5-9s展示 9-10s向左滑出隐藏。

　　同理剩下的子项，依次顺延调整好动画，整体的效果就会非常流畅。

进度条动画

　　因展示时间较长4s，所以可以加入进度条，交互体验会更加好。HTML中的div.progress即是进度条的结构。样式如下：

.slide-box .progress{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 0;
  background-color: rgba(0,0,0,0.7);
  -webkit-animation: progress 5s linear infinite;
          animation: progress 5s linear infinite;
  z-index: 2;
}

@-webkit-keyframes progress {
  0%{
    width: 0;
  }
  80%{
    width: 100%;
  }
  81%{
    width: 0;
  }
  100%{
    width: 0;
  }
}

　　通过控制宽度来标识进度。

hover 暂停动画

　　若需要鼠标悬停时暂停动画，使用 animation-play-state: paused 控制即可

.slide-box:hover ul li,
.slide-box:hover .progress
{
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

结语

　　虽然功能简单，但是纯css3实现的效率还是很高的，效果也不错---------见 demo

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：元素浮动

下一篇：CSS3学习-用CSS制作立体导航栏

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签