• 纯CSS实现轮播图

    利用CSS实现一个轮播图，实现无缝衔接、平滑过渡、hover暂停效果。

    本文利用纯CSS实现一个轮播图，代码简捷、实现简单，没有js的接入，为一定场景下的轮播图提供一个简单的实现。先看效果图：

    1. 思路解析

    我们把整个轮播分为三个区域解析：分别是外层的视口区域，负责展示轮播内容，然后是整个内容区，在内容区下附加一个填充区域，补充区域的内容和轮播首屏的内容一致。

    当内容区的最后一屏数据向上滚动的时候，补充区的数据随之滚动。当滚动动作结束之后，立即让内容区的第一屏数据和补充区域的数据返回原位。因为补充区域的数据和内容区的第一屏数据是一致的，所以，此次的回复原位不会让用户在视觉上感受到，从而做到平滑无感替换。具体滚动过程详见： 

     把填充区域的颜色设置成和内容区一样的颜色，效果：

     把视口区域设置查出区域不可见，就得到了我们最初的轮播效果：

     2.代码实现

    根据以上思路，我们编写代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>css轮播title>
    6. head>
    7. <body>
    8. 	<div class='wrapDiv' >
    9. 		<ul class="ul-scroll">
    10. 			<li>1li>
    11. 			<li>2li>
    12. 			<li>3li>
    13. 			<li>4li>
    14. 			<li>5li>
    15.  
    16. 			<li>6li>
    17. 			<li>7li>
    18. 			<li>8li>
    19. 			<li>9li>
    20. 			<li>10li>
    21. 		ul>
    22. 		<ul class="ul-scroll ul-fill">
    23. 			<li>1li>
    24. 			<li>2li>
    25. 			<li>3li>
    26. 			<li>4li>
    27. 			<li>5li>
    28. 		ul>
    29. 	div>
    30. 	<style>
    31. 		.wrapDiv{
    32. 			width:300px;
    33. 			height:150px;
    34. 			overflow:hidden;
    35. 			border:1px solid blue;
    36. 			position:relative;
    37. 		}
    38. 		.ul-scroll{
    39. 			position:absolute;
    40. 			width:100%;
    41. 			height:300px;
    42. 			animation:run 4s infinite;
    43. 			margin-top:0px;
    44. 			padding:0px;
    45. 		}
    46. 		.ul-fill{
    47. 			top:300px;
    48. 		}
    49. 		ul li {
    50. 			background-color: '#ddd';
    51. 			height:26px;
    52. 			padding:2px 0;
    53. 			background-color: #99a9bf;
    54. 			background-clip: content-box;
    55. 			text-align: center;
    56. 			list-style:none;
    57. 			margin:0
    58. 		}
    59. 	
    60. 		@keyframes run {
    61. 			0% {
    62. 				transform:translateY(0);
    63. 			}
    64. 			40% {
    65. 				transform:translateY(0);
    66. 			}
    67. 			50%{
    68. 				transform:translateY(-50%);
    69. 			}
    70. 			90%{
    71. 				transform:translateY(-50%);
    72. 			}
    73. 			100%{
    74. 				transform:translateY(-100%);
    75. 			}
    76. 		}
    77. 	style>
    78. body>
    79. html>

     注意需要合理设置li的高度以及wrapDiv的高度。

    3.鼠标悬停

    通过以上方式，我们得到了一个自动播放、无缝衔接的轮播图。轮播图不可或缺的一个功能点是，当鼠标放上去的时候播放停止。由于我们的动画是通过CSS的animation实现的，所以悬停还是通过修改CSS的方式去实现。要通过CSS去停止动画的播放，就不得不用到CSS的animation-play-state属性。该属性可以控制animation的暂停、播放。

    添加如下CSS样式：

    1. .wrapDiv:hover .ul-scroll{
    2. 	animation-play-state:paused
    3. }

    当鼠标悬停在外层的视口区域时，停止两个ul的动画。鼠标移走时，动画继续： 

    总结

    本文通过CSS实现可悬停的轮播图效果，不需要js进行复杂的位置计算。为小伙伴们提供一种轮播图的实现思路。喜欢的小伙伴们别忘了点赞收藏关注哈~~。最后，欢迎关注公众号：【前端技术站】。

  • 相关阅读:
    搜索技术【深度优先搜索】 - 排列树
    iOS-系统弹窗调用，
    Docker安装InfluxDB_用户名密码和策略使用
    基于C#和三菱PLC通过MX Component进行通信的具体方法
    【JAVA基础】多线程与线程池
    内网渗透之Windows反弹shell（三）
    数据结构之美：如何优化搜索和排序算法
    C语言：static，volatile，const，extern，register，auto, 栈stack结构
    生命科学领域下的“全球突破性十大技术”干货与分享
    JAVA编程规范之异常处理
  • 原文地址：https://blog.csdn.net/u014399368/article/details/126439906