登录  /  注册
首页 > web前端 > css教程 > 正文

纯CSS3实现轮播图的方法

一个新手
发布: 2017-10-16 10:48:27
原创
1676人浏览过

前言

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

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

HTML部分


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

      </p>
    </p>
  </p></body>
登录后复制

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

布局部分


/*reset*/html,body,p,ul,li,img,h1,a{
  margin: 0;
  padding: 0;
}ul{
  list-style: none;
}/*slide style*/html,body{
  width: 100%;
  height: 100%;
}body{
  background: url(&#39;./../images/bg.png&#39;) 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;
}
登录后复制

 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中的p.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实现轮播图的方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号