【CSS】图片栏无缝滚动效果实现

最新推荐文章于 2024-10-12 19:51:27 发布

ljs_coding

最新推荐文章于 2024-10-12 19:51:27 发布

阅读量2.5k

点赞数 2

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/ChristineAS/article/details/87877625

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

思路分析：

第一步，定义div>ul>li*7,因为有7张图片。

第二步，设置div的宽度高度以及li的浮动，保证它们全部在div内的同一行。

第三步，实现滚动。用到了动画相关知识点，即

animation: move 5s linear infinite;
@keyframes move{
	 	from{
			transform: translateX(0);
		}
		to{
			transform: translateX(-882px);
		}
}

第四步，现在已经可以向左滚动了，但是问题是什么呢？“无缝”还没有实现，即向左滚动后原位置出现了空隙。解决办法就是复制相同的li内容添加在后面，为了避免出现两行，要把ul的宽度设置为200%。

第五步，最后一步，限制所有内容都在div内，所以添加overflow:hidden，大功告成。

完整源代码

<!DOCTYPE html>
<html>
<head>
	<title>无缝滚动效果</title>
	<style type="text/css">
	   *{
	   	margin: 0;
	   	padding: 0;
	   }
		ul{
			list-style: none;
			/*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
			-webkit-animation: move 5s linear infinite;
			-o-animation: move 5s linear infinite;
			animation: move 5s linear infinite;
			width:200%;

		}
		li{
			float: left;
		}
		div{
			width:882px;
			height:86px;
			margin:100px auto;
			border: 1px solid red;
			overflow: hidden;
		}
		@keyframes move{
			from{
				transform: translateX(0);
			}
			to{
				transform: translateX(-882px);
			}
		}
	</style>
</head>
<body>
<div>
	<ul>
		<li><img src="images/nav1.jpg"></li>
		<li><img src="images/nav2.jpg"></li>
		<li><img src="images/nav3.jpg"></li>
		<li><img src="images/nav4.jpg"></li>
		<li><img src="images/nav5.jpg"></li>
		<li><img src="images/nav6.jpg"></li>
		<li><img src="images/nav7.jpg"></li>
		<li><img src="images/nav1.jpg"></li>
		<li><img src="images/nav2.jpg"></li>
		<li><img src="images/nav3.jpg"></li>
		<li><img src="images/nav4.jpg"></li>
		<li><img src="images/nav5.jpg"></li>
		<li><img src="images/nav6.jpg"></li>
		<li><img src="images/nav7.jpg"></li>
	</ul>
</div>
</body>
</html>