当前位置:Gxlcms > css > 纯CSS3实现轮播图的方法

纯CSS3实现轮播图的方法

时间:2021-07-01 10:21:17 帮助过:7人阅读

前言

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

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

HTML部分


  1. <p class="container">
  2. <p class="title-container">
  3. <h1>纯CSS3轮播图</h1>
  4. </p>
  5. <p class="slide-box">
  6. <ul>
  7. <li class="slide-item slide1">
  8. <a href="#">
  9. <img src="images/img-1.jpg" alt="">
  10. <p class="tooltip">
  11. 生活 </p>
  12. </a>
  13. </li>
  14. <li class="slide-item slide2">
  15. <a href="#">
  16. <img src="images/img-2.jpg" alt="">
  17. <p class="tooltip">
  18. 热情 </p>
  19. </a>
  20. </li>
  21. <li class="slide-item slide3">
  22. <a href="#">
  23. <img src="images/img-3.jpg" alt="">
  24. <p class="tooltip">
  25. 乐观 </p>
  26. </a>
  27. </li>
  28. <li class="slide-item slide4">
  29. <a href="#">
  30. <img src="images/img-4.jpg" alt="">
  31. <p class="tooltip">
  32. 美好 </p>
  33. </a>
  34. </li>
  35. <li class="slide-item slide5">
  36. <a href="#">
  37. <img src="images/img-5.jpg" alt="">
  38. <p class="tooltip">
  39. 意义 </p>
  40. </a>
  41. </li>
  42. </ul>
  43. <p class="progress">
  44. </p>
  45. </p>
  46. </p></body>

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

布局部分


  1. /*reset*/html,body,p,ul,li,img,h1,a{
  2. margin: 0;
  3. padding: 0;
  4. }ul{
  5. list-style: none;
  6. }/*slide style*/html,body{
  7. width: 100%;
  8. height: 100%;
  9. }body{
  10. background: url('./../images/bg.png') repeat;
  11. }.container{
  12. width: 1000px;
  13. height: 100%;
  14. margin: 0 auto;
  15. }.container .title-container{
  16. width: 800px;
  17. height: 100px;
  18. line-height: 100px;
  19. margin: 20px auto;
  20. text-align: center;
  21. }.slide-box{
  22. position: relative;
  23. width: 800px;
  24. height: 533px;
  25. margin: 0 auto;
  26. border:5px solid #eaeaea;
  27. -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.7);
  28. box-shadow:1px 1px 5px rgba(0,0,0,0.7);
  29. }.slide-box ul{
  30. position: relative;
  31. width: 100%;
  32. height: 100%;
  33. overflow: hidden;
  34. }.slide-box ul li{
  35. position: absolute;
  36. top: 0;
  37. left: 0;
  38. width: 100%;
  39. height: 100%;
  40. cursor: pointer;
  41. }.slide-box ul li .tooltip{
  42. position: absolute;
  43. left: 50px;
  44. top: -40px;
  45. height: 40px;
  46. width: 100px;
  47. text-align: center;
  48. background-color: rgba(0,0,0,0.7);
  49. color: #fff;
  50. line-height: 40px;
  51. -webkit-transition: all 0.3s ease-in-out;
  52. transition: all 0.3s ease-in-out;
  53. }.slide-box ul li:hover .tooltip{
  54. top: 2px;
  55. z-index: 2;
  56. }

 1、容器溢出隐藏

 2、轮播子项绝对定位

轮播动画部分

 这部分才是本文的重点。

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

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


  1. .slide-box ul li.slide1{
  2. -webkit-animation: slide1 25s linear infinite;
  3. animation: slide1 25s linear infinite;
  4. }@-webkit-keyframes slide1 {
  5. 0% {
  6. left: 0;
  7. opacity: 1;
  8. }
  9. 16% {
  10. left: 0;
  11. opacity: 1;
  12. }
  13. 20% {
  14. left: 800px;
  15. opacity: 0;
  16. z-index: 0;
  17. }
  18. 21% {
  19. left: -800px;
  20. opacity: 0;
  21. z-index: 0;
  22. }
  23. 95% {
  24. left: -800px;
  25. opacity: 0;
  26. z-index: 1;
  27. }
  28. 96% {
  29. left: -800px;
  30. opacity: 0;
  31. z-index: 1;
  32. }
  33. 100% {
  34. left: 0;
  35. opacity: 1;
  36. z-index: 1;
  37. }}

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


  1. .slide-box ul li.slide2{
  2. -webkit-animation: slide2 25s linear infinite;
  3. animation: slide2 25s linear infinite;
  4. }@-webkit-keyframes slide2 {
  5. 0% {
  6. left: -800px;
  7. opacity: 0;
  8. z-index: 0;
  9. }
  10. 16% {
  11. left: -800px;
  12. opacity: 0;
  13. z-index: 1;
  14. }
  15. 20% {
  16. left: 0;
  17. opacity: 1;
  18. z-index: 1;
  19. }
  20. 36% {
  21. left: 0;
  22. opacity: 1;
  23. z-index: 1;
  24. }
  25. 40% {
  26. left: 800px;
  27. opacity: 0;
  28. z-index: 0;
  29. }
  30. 41% {
  31. left: -800px;
  32. opacity: 0;
  33. z-index: 0;
  34. }
  35. 100% {
  36. left: -800px;
  37. opacity: 0;
  38. z-index: 0;
  39. }}

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

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

进度条动画

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


  1. .slide-box .progress{
  2. position: absolute;
  3. bottom: 0;
  4. left: 0;
  5. height: 5px;
  6. width: 0;
  7. background-color: rgba(0,0,0,0.7);
  8. -webkit-animation: progress 5s linear infinite;
  9. animation: progress 5s linear infinite;
  10. z-index: 2;
  11. }@-webkit-keyframes progress {
  12. 0%{
  13. width: 0;
  14. }
  15. 80%{
  16. width: 100%;
  17. }
  18. 81%{
  19. width: 0;
  20. }
  21. 100%{
  22. width: 0;
  23. }}

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

hover 暂停动画

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


  1. .slide-box:hover ul li,
  2. .slide-box:hover .progress{
  3. -webkit-animation-play-state: paused;
  4. animation-play-state: paused;
  5. }

以上就是纯CSS3实现轮播图的方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行