纯css实现banner图轮播且放大缩小100%居中显示

意中人Crush

已于 2022-06-07 18:56:02 修改

阅读量2.8k

点赞数 6

分类专栏： html基础以及练习题文章标签： CSS 轮播图居中显示动画关键帧

于 2022-06-07 18:52:39 首次发布

本文链接：https://blog.csdn.net/qq_69555866/article/details/125171098

版权

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纯css实现banner图放大缩小100%居中显示</title>
	</head>
	<body>
		<div class="wrapper">	
			<div class="box">
				<div class="img1"></div>
				<div class="img2"></div>
				<div class="img3"></div>
			</div>
		</div>
	</body>
</html>

css代码及相关注释：

           /* 设置banner图外层高度
			   占满浏览器，宽度设置100%
			   溢出部分隐藏*/
			.wrapper{
				height: 500px;
				width: 100%;
				overflow: hidden;
			}
			/* 外层内包一个div，
			   通过给该div添加移动动画效果实现轮播*/
		   .box{
			   /* 三个图片轮播，图片高度为500px，根据需求自行调整 */
			   height:1500px;
			   /* 定义动画延迟时间，无限重复，步进为3，根据需求自行调整*/
			   animation: mybox 5s infinite steps(3);
		   }
		   /* 给内层需要轮播的图片设置3个div，