css3动画实现无缝连接

最新推荐文章于 2024-08-13 11:46:51 发布

IT-Xu_LongTeng

最新推荐文章于 2024-08-13 11:46:51 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44269204/article/details/89111167

版权

本文详细介绍了如何使用CSS3的动画属性创建平滑无缝的动画效果，包括关键帧动画、过渡效果以及如何确保动画在不同浏览器间的兼容性。通过实例代码，读者将能够掌握实现此类动画的核心技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*body{
			margin: 0;
			padding: 0;
		}
			.warp{
				width: 1500px;
				height: 135px;
				border: 3px solid red;
				margin: 300px auto;
				position: relative;
				overflow: hidden;
			}
			
			.warp ul{
				width:3000px;
				height: 135px;
				position: absolute;
				animation: moves 10s linear infinite;
				padding: 0;
				margin: 0;
				
			}			
			.warp li{
				float: left;
				list-style: none;
				margin-left: 5px;
				width: 200px;					
			}

			@keyframes moves{
				0%{
					transform: translateX(0px);
				}
				100%{
					transform: translateX(-1500px);
				}
			}		
			.warp:hover ul{
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div class="warp">
			<ul>
				<li><img src="img/Lol-01.jpg"></li>
				<li><img src=