使用animation实现匀速无缝循环滚动动画，鼠标悬停停止运动

最新推荐文章于 2024-05-10 15:56:59 发布

原创最新推荐文章于 2024-05-10 15:56:59 发布 · 6.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #循环滚动

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何利用CSS动画（animation）创建一个匀速且无缝循环的滚动效果，并详细讲解了如何通过:hover伪类在鼠标悬停时暂停动画的技巧，为网页增加动态交互体验。

部署运行你感兴趣的模型镜像

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝轮播</title>
	<!-- 运动 -->
	<!-- 
	voison：0.1 
	1 2 3 4 5 6 1
	1走到6再到1，这时如果没有1这张图就有一个1图闪现的过程，也就是说，用1图来掩盖图片的动画的重新开始
	多添加一张图，运动六张图的距离
	 -->
	<style>
		* {
			margin:0 auto;
		}
		a {
			text-decoration: none;
			display: block;
		}
		ul {
		
			list-style-type: none;
		}
		.banner-lb {
			width: 310px;
			border: 1px solid pink;
			height: 193px;
			margin:0 auto;	
			overflow: hidden;
		}
		.banner-lb img {
			width:310px;
			height: 193px;
		}
		.banner-lb ul {
			width: 700%;   /* 多添加一张图的长度，以避免出现闪图的bug*/
			padding-left: 0px;
			animation: lb 15s linear infinite;   /*循环播放 匀速*/
		}
		.banner-lb:hover ul {    /*
			*/
			animation-play-state: paused;
		}
		@keyframes lb {
			form {
				transform: translateX(0);
			}
			to {
				transform: translateX(-1860px); /*只需要移动6张图的距离，这时显示的是最后一张图，而最后一张图和第一张图是一样的，造成一种循环的假象*/
			}
		}
		.banner-lb ul li {
			display: block;
			float: left;
		}


	</style>
</head>
<body>
	<div class="banner-lb">
		<ul>
			<li><a href=""><img src="img/190.jpg" alt=""></a></li>
			<li><a href=""><img src="img/191.jpg" alt=""></a></li>
			<li><a href=""><img src="img/192.jpg" alt=""></a></li>
			<li><a href=""><img src="img/193.jpg" alt=""></a></li>
			<li><a href=""><img src="img/194.jpg" alt=""></a></li>
			<li><a href=""><img src="img/195.jpg" alt=""></a></li>
			<li><a href=""><img src="img/190.jpg" alt=""></a></li>
		</ul>
	</div>
</body>
</html>

您可能感兴趣的与本文相关的镜像

AutoGPT

AI应用

AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标