纯CSS实现无缝滚动

最新推荐文章于 2025-03-01 07:00:00 发布

lrp9090

最新推荐文章于 2025-03-01 07:00:00 发布

阅读量1.9k

点赞数

文章标签： css3 animation 无缝滚动动画效果

本文链接：https://blog.youkuaiyun.com/lrp9090/article/details/92990417

版权

1.效果展示

在这里插入图片描述
2.html代码

<ul>
	<li id="list">
		<img src="http://pic41.nipic.com/20140508/18609517_112216473140_2.jpg" height="300" width="300" />
	
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561008982301&di=b080b02fc6925135728916cbe5ea5315&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F02%2F20150202112717_5HKTG.jpeg" height="300" width="300" />
	
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561009023816&di=670aa4779b186ad5e010d0f3e95c0997&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F14%2F2018071494136_Eds3X.png" height="300" width="300" />
		<!--为了实现无缝滚动，将展现的图片在拷贝一份-->
		<img src="http://pic41.nipic.com/20140508/18609517_112216473140_2.jpg" height="300" width="300" />
	
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561008982301&di=b080b02fc6925135728916cbe5ea5315&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F02%2F20150202112717_5HKTG.jpeg" height="300" width="300" />
	
		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561009023816&di=670aa4779b186ad5e010d0f3e95c0997&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F14%2F2018071494136_Eds3X.png" height="300" width="300" />
		
	</li>
</ul>

3.css代码

* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
		animation: move 15s linear infinite;
		animation-delay: 2s;/*延迟2s在进行滚动*/
		width: 200%;
		overflow: hidden;
	}
	li img{
		float: left;
	}
	ul {
		width: 900px;
		height: 300px;
		margin: 100px auto;
		background: #eee;
		overflow: hidden;
	}
	li:hover{
		animation-play-state: paused;/*鼠标悬浮，动画停止*/
	}
	/* 添加动画 */
	@keyframes move{
		from {
			transform: translate(0);
		}
		to {
			transform: translate(-900px);
		}
	}