菜单 学习猿地 - LMONKEY

 怎样用css实现图片不间断滚动

怎样用css实现图片不间断滚动

石子酱 profile image 石子酱 ・1 min read

怎样用css实现图片不间断滚动

效果图:

Snipaste_2019-12-20_10-17-26.jpg思路分析:

第一步,定义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%。

(相关课程推荐:css视频教程

第五步,最后一步,限制所有内容都在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;
			overflow: auto;
		}
		li img{
			width: 126px;
		}
		div{
			width:882px;
			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="css3.jpg"></li>
		<li><img src="css-4.jpg"></li>
		<li><img src="css-5.jpg"></li>
		<li><img src="hc1.jpg"></li>
		<li><img src="html.jpg"></li>
		<li><img src="css3.jpg"></li>
		<li><img src="css-4.jpg"></li>
		<li><img src="css3.jpg"></li>
		<li><img src="css-4.jpg"></li>
		<li><img src="css-5.jpg"></li>
		<li><img src="hc1.jpg"></li>
		<li><img src="html.jpg"></li>
		<li><img src="css3.jpg"></li>
		<li><img src="css-4.jpg"></li>
	</ul>
</div>
</body>
</html>

评论 (0)