css3动画实现轮播图效果

最新推荐文章于 2024-04-15 10:28:24 发布

听听那晚风

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量776

点赞数 1

分类专栏： css 文章标签： css animation

本文链接：https://blog.csdn.net/GongWei_/article/details/112170774

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.lunbo{
				width: 720px;
				height: 896px;
				margin: 100px auto;
				overflow: hidden;
				border: 1px solid black;
				position: relative;
			}
			.lunbo ul{
				width: 500%;
				list-style: none;
				position: absolute;
				animation: yb 7s linear 0s infinite normal;
			}
			.lunbo li{
				width: 720px;
				height: 896px;
				float: left;
			}
			@keyframes yb{
				0%{
					transform: translateX(0%);
				}
				20%{
					transform: translateX(0%);
				}
				25%{
					transform: translateX(-720px);
				}
				45%{
					transform: translateX(-720px);
				}
				50%{
					transform: translateX(-1440px);
				}
				70%{
					transform: translateX(-1440px);
				}
				75%{
					transform: translateX(-2160px);
				}
				95%{
					transform: translateX(-2160px);
				}
				100%{
					transform: translateX(-2880px);
				}
				}
			}
		</style>
	</head>
	<body>
		<div class="lunbo">
		<ul>
			<li><img src="img/QQ图片20190226121732.jpg" width="100%" height="100%" alt=""/></li>
			<li><img src="img/QQ图片20190226121753.jpg" width="100%" height="100%" alt=""/></li>
			<li><img src="img/QQ图片20190226121801.jpg" width="100%" height="100%" alt=""/></li>
			<li><img src="img/QQ图片20190226121757.jpg" width="100%" height="100%" alt=""/></li>
			<li><img src="img/QQ图片20190226121732.jpg" width="100%" height="100%" alt=""/></li>
		</ul>
		</div>
	</body>
</html>

注意：第一张图和最后一张图是一样的，这样做的目的是为了更好的无缝轮播效果

听听那晚风

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css3动画实现轮播图效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图</title> <style> *{ margin: 0; padding: 0; } .lunbo{ width: 720px; height: 896px; margin: 100px auto; overflow:
复制链接

扫一扫