当前位置:Gxlcms > css > 详细介绍一篇用纯css3实现的轮播图效果实例

详细介绍一篇用纯css3实现的轮播图效果实例

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

本篇文章主要介绍了纯css3实现轮播图效果实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

首先先看demo吧,点击查看demo

一、随便说几句

css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低了动画效果的实现难度,利于前端的学习,其精简的代码量把我们从烦人的js调试中解放出来,当然css的动画效果有其局限性,我们不能只用css3模拟出全部的就是动画,另外就是浏览器的兼容性问题。我们这次用css3实现一个轮播图效果,体验一下css3的强大。首先说明我们可次只实现了自动轮播,效果也是最常见的淡入淡出,并未实现点击轮换效果,至少在我目前水平来看,自动轮播与点击轮换两者纯css3只能选其一,如果可以同时实现两种效果的方法,请告诉我。

二、布局

  1. <section class="slider-contaner">
  2. <ul class="slider">
  3. <li class="slider-item slider-item1"></li>
  4. <li class="slider-item slider-item2"></li>
  5. <li class="slider-item slider-item3"></li>
  6. <li class="slider-item slider-item4"></li>
  7. <li class="slider-item slider-item5"></li>
  8. </ul>
  9. </section>

html代码没有什么可说的,样式的话首先必定slider的大盒子必定是相对定位,另外我们采用在li标签中添加background-image,因为这样才有可能用纯的css实现响应式,另外背景图为了在响应式中看清全貌,必然使用background-size:100%,另外就是高度问题了,显然slider-container必需是和li的高度一致,因为响应式中必然这个高度不能固定死,所以使用height属性显然不行,padding属性可以解决这个问题,一是background-image可以显示在padding中,二是padding中以%为单位是以父元素宽度为基准的。

  1. *{
  2. margin:0;
  3. padding:0;
  4. }
  5. ul,li{
  6. list-style: none;
  7. }
  8. .floatfix {
  9. *zoom: 1;
  10. }
  11. .floatfix:after {
  12. content: "";
  13. display: table;
  14. clear: both;
  15. }
  16. .slider-contaner{
  17. width:100%;
  18. position:relative;
  19. }
  20. .slider,.slider-item{
  21. padding-bottom:40%;
  22. }
  23. .slider-item{
  24. width:100%;
  25. position:absolute;
  26. background-size:100%;
  27. }
  28. .slider-item1{
  29. background-image:url(imgs/1.jpg);
  30. }
  31. .slider-item2{
  32. background-image:url(imgs/2.jpg);
  33. }
  34. .slider-item3{
  35. background-image:url(imgs/3.jpg);
  36. }
  37. .slider-item4{
  38. background-image:url(imgs/4.jpg);
  39. }
  40. .slider-item5{
  41. background-image:url(imgs/5.jpg);
  42. }

三、设计动画

淡入淡出效果肯定是使用opacity,首先整体来看所有图片的淡入淡出都是同一个动画,只是时间不一样而已,这肯定是利用animation-delay来控制,动画无限轮换肯定使用animation-iteration-count: infinite,我们这次5张图片,整个动画分为图片停留和淡入淡出两个效果,用下图表示,箭头表示淡入淡出过程。

因为css3中没有一个属性是规定两次动画播放的时间间隔,所以我们必须把其他图片淡入淡出时该图片的效果写进动画里,显然这时候是opacity:0;我们为了写动画的方便,动画使用线性函数,也就是animation-timing-function:linear;整个过程使用20s,一次停留使用3秒,一次淡入淡出使用1s,折合成百分比也就是15%和5%;


  1. @keyframes fade{
  2. 0%{
  3. opacity:0;
  4. z-index:2;
  5. }
  6. 5%{
  7. opacity:1;
  8. z-index: 1;
  9. }
  10. 20%{
  11. opacity:1;
  12. z-index:1;
  13. }
  14. 25%{
  15. opacity:0;
  16. z-index:0;
  17. }
  18. 100%{
  19. opacity:0;
  20. z-index:0;
  21. }
  22. }

接下来就是为每张图片添加animation-delay了,因为第一张图片必须显示在最前,所以其他通过相邻兄弟选择器使用opacity:0,第一张图片开始不需要淡入淡出,直接跳至停留也就是5%,所以animation-delay为-1s,第二章图片和第一张相隔20%,也就是4s,animation-delay为3s,以此类推


  1. .slider-item + .slider-item{
  2. opacity:0;
  3. }
  4. .slider-item1{
  5. animation-delay: -1s;
  6. }
  7. .slider-item2{
  8. animation-delay: 3s;
  9. }
  10. .slider-item3{
  11. animation-delay: 7s;
  12. }
  13. .slider-item4{
  14. animation-delay: 11s;
  15. }
  16. .slider-item5{
  17. animation-delay: 15s;
  18. }

这个时候我们的轮播图可以动了

四、添加轮播焦点

添加轮播焦点当然不是为了点击,而是告诉访问者这里有几张图片和目前图片的位置,至少以我个人而言,轮播焦点很重要,因为如果我不知道轮播的图片有几张,我又没有办法点击,我就会非常不安,感觉自己没有看到整个网页的全貌。所以我们还是添加一下轮播焦点。首先非常明确的这个仍然可以使用上面的动画,另外布局肯定使用position:absolute,另外很明显焦点我们必须写两次,一次是当前图片的样式,一次是非当前图片的样式

  1. <p class="focus-container">
  2. <ul class="floatfix">
  3. <li><p class="focus-item focus-item1"></p></li>
  4. <li><p class="focus-item focus-item2"></p></li>
  5. <li><p class="focus-item focus-item3"></p></li>
  6. <li><p class="focus-item focus-item4"></p></li>
  7. <li><p class="focus-item focus-item5"></p></li>
  8. </ul>
  9. </p>


  1. .focus-container{
  2. position:absolute;
  3. bottom:2%;
  4. z-index:7;
  5. margin:0 auto;
  6. left:0;
  7. right:0;
  8. }
  9. .focus-container ul{
  10. margin-left:46%;
  11. }
  12. .focus-container li{
  13. width:10px;
  14. height:10px;
  15. border-radius:50%;
  16. float:left;
  17. margin-right:10px;
  18. background:#fff;
  19. }
  20. .focus-item{
  21. width:100%;
  22. height:100%;
  23. background:#51B1D9;
  24. border-radius:inherit;
  25. animation-duration: 20s;
  26. animation-timing-function: linear;
  27. animation-name:fade;
  28. animation-iteration-count: infinite;
  29. }
  30. .focus-item1{
  31. animation-delay: -1s;
  32. }
  33. .focus-item2{
  34. animation-delay: 3s;
  35. }
  36. .focus-item3{
  37. animation-delay: 7s;
  38. }
  39. .focus-item4{
  40. animation-delay: 11s;
  41. }
  42. .focus-item5{
  43. animation-delay: 15s;
  44. }

五、梳理代码

如果你维护过别人的代码你就会知道,代码梳理对于后期维护的重要性了,没有经过梳理的css代码,随心所欲写到哪里就是哪里,对于后期维护来说简直就是一场灾难,css代码梳理个人认为首先必须添加必要的注释,将css代码分区,另外就是尽量减少后期修改需要修改的地方,这个主要是代码重构的问题,这个问题我已经在编写代码的时候考虑到了,所以主要任务就是添加注释和告诉维护者代码最常修改的地方,我们遵循最常修改的代码放到最后的原则。

我们来分析一下我们的代码如果给别人用可能需要修改的地方,首先肯定是图片路径,所以我们把这个样式放在最后,然后是图片高度,轮播焦点的颜色,动画时间的设置(这里还涉及图片个数),轮播焦点的位置,当然轮播焦点大小也可能修改。重构后代码如下:

  1. <section class="slider-contaner">
  2. <ul class="slider">
  3. <li class="slider-item slider-item1"></li>
  4. <li class="slider-item slider-item2"></li>
  5. <li class="slider-item slider-item3"></li>
  6. <li class="slider-item slider-item4"></li>
  7. <li class="slider-item slider-item5"></li>
  8. </ul>
  9. <p class="focus-container">
  10. <ul class="floatfix">
  11. <li><p class="focus-item focus-item1"></p></li>
  12. <li><p class="focus-item focus-item2"></p></li>
  13. <li><p class="focus-item focus-item3"></p></li>
  14. <li><p class="focus-item focus-item4"></p></li>
  15. <li><p class="focus-item focus-item5"></p></li>
  16. </ul>
  17. </p>
  18. </section>
  1. /*css reset start*/
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. ul,li{
  7. list-style: none;
  8. }
  9. /*css reset end*/
  10. /*css public start*/
  11. .floatfix {
  12. *zoom: 1;
  13. }
  14. .floatfix:after {
  15. content: "";
  16. display: table;
  17. clear: both;
  18. }
  19. /*css public end*/
  20. /*slider start*/
  21. .slider-contaner{
  22. width:100%;
  23. position:relative;
  24. }
  25. .slider-item + .slider-item{
  26. opacity:0;
  27. }
  28. .slider-item{
  29. width:100%;
  30. position:absolute;
  31. animation-timing-function: linear;
  32. animation-name:fade;
  33. animation-iteration-count: infinite;
  34. background-size:100%;
  35. }
  36. .focus-container{
  37. position:absolute;
  38. z-index:7;
  39. margin:0 auto;
  40. left:0;
  41. right:0;
  42. }
  43. .focus-container li{
  44. width:10px;
  45. height:10px;
  46. border-radius:50%;
  47. float:left;
  48. margin-right:10px;
  49. background:#fff;
  50. }
  51. .focus-item{
  52. width:100%;
  53. height:100%;
  54. border-radius:inherit;
  55. animation-timing-function: linear;
  56. animation-name:fade;
  57. animation-iteration-count: infinite;
  58. }
  59. .focus-item2,.focus-item3,.focus-item4,.focus-item5{
  60. opacity:0;
  61. }
  62. .focus-container ul{
  63. margin-left:46%;
  64. }
  65. /*设置轮播焦点的位置*/
  66. .focus-container{
  67. bottom:2%;
  68. }
  69. /*设置当前图片焦点的颜色*/
  70. .focus-item{
  71. background:#51B1D9;
  72. }
  73. /*设置动画,请根据实际需要修改秒数*/
  74. .slider-item,.focus-item{
  75. animation-duration: 20s;
  76. }
  77. .slider-item1,.focus-item1{
  78. animation-delay: -1s;
  79. }
  80. .slider-item2,.focus-item2{
  81. animation-delay: 3s;
  82. }
  83. .slider-item3,.focus-item3{
  84. animation-delay: 7s;
  85. }
  86. .slider-item4,.focus-item4{
  87. animation-delay: 11s;
  88. }
  89. .slider-item5,.focus-item5{
  90. animation-delay: 15s;
  91. }
  92. @keyframes fade{
  93. 0%{
  94. opacity:0;
  95. z-index:2;
  96. }
  97. 5%{
  98. opacity:1;
  99. z-index: 1;
  100. }
  101. 20%{
  102. opacity:1;
  103. z-index:1;
  104. }
  105. 25%{
  106. opacity:0;
  107. z-index:0;
  108. }
  109. 100%{
  110. opacity:0;
  111. z-index:0;
  112. }
  113. }
  114. /*设置背景,响应式请利用媒体查询根据断点修改路径*/
  115. .slider-item1{
  116. background-image:url(imgs/1.jpg);
  117. }
  118. .slider-item2{
  119. background-image:url(imgs/2.jpg);
  120. }
  121. .slider-item3{
  122. background-image:url(imgs/3.jpg);
  123. }
  124. .slider-item4{
  125. background-image:url(imgs/4.jpg);
  126. }
  127. .slider-item5{
  128. background-image:url(imgs/5.jpg);
  129. }
  130. /*设置图片的高度,请根据具体需要修改百分比,响应式及时修改此值*/
  131. .slider,.slider-item{
  132. padding-bottom:40%;
  133. }

六、最后扯两句

这种css3实现的轮播图,缺点也是不言而喻,点击轮换和自动轮换两者只能选其一,不过自动轮换可以用在手机端,这是一个不错的选择,另外,现在的网站大都是通栏设计,网页文字很少,尤其是网站首页更是如此,有时候比的不是网站设计的优劣,反而是谁选的图片好看,谁就有可能受到青睐,这种情况我们其实可以考虑将轮播图变为背景的轮换,这时候轮播焦点也就可以不使用了,相信你的博客首页或者产品首页使用背景轮换,效果会非常不错的。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱(2)-css视频教程

以上就是详细介绍一篇用纯css3实现的轮播图效果实例的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行