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

意中人Crush

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

阅读量2.7k

点赞数 6

分类专栏： html基础以及练习题文章标签： css elementui sass

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

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

版权

html基础以及练习题专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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，
		      图片设为背景图片，不铺满且一直居中*/
		    .box .img1{
				height:500px;
				width:100%;
				background:url(img/01.jpg) no-repeat center;
				background-size: cover;
			}
			.box .img2{
				height:500px;
				width:100%;
				background:url(img/02.jpg) no-repeat center;
				background-size: cover;
			}
			.box .img3{
				height:500px;
				width:100%;
				background:url(img/03.jpg) no-repeat center;
				background-size: cover;
			}
			/* 定义关键帧，从第一个div移动到最后一个div，
			   高度为500px，宽度被占满，所以最后一个就需要从Y轴移动-1500px，
				根据需求自行调整*/
		  @keyframes mybox{
		   	  form{
				  transform: translateY(0px);
			  }
			  to{
			  	 transform: translateY(-1500px);
			  }
		   }

效果展示：

结果分析

通过对css代码的运行，在浏览器内实现了banner图的100%居中轮播，由于本人是一个技术小白，在某些方面表达的不是太过清除，欢迎各位批评指正。

意中人Crush

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
纯css实现banner图轮播且放大缩小100%居中显示

纯css实现banner图轮播且放大缩小100%居中显示效果展示：通过对css代码的运行，在浏览器内实现了bannar图的100%居中轮播，由于本人是一个技术小白，在某些方面表达的不是太过清除，欢迎各位批评指正。......
复制链接

扫一扫