纯html+css制作banner轮播图

lm778

已于 2022-08-11 21:07:52 修改

阅读量2.8k

点赞数 5

分类专栏： css 文章标签： css html css3

于 2022-08-05 23:45:00 首次发布

本文链接：https://blog.csdn.net/m0_59798527/article/details/125897216

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

banner 轮播图

方法：应用css3高级特效 translate X
一般的滑动轮播图都是在水平方向上的滑动，
原理是：在一个盒子里面把所需用到的图片放里面，进行float浮动，经过浮动后的元素是没有的间隙的，然后在装图片的盒子外边再外套一个盒子，进行溢出隐藏over-flow:hidden
装图片的盒子宽度是与所有图片的宽高一直，外套盒子宽高与一张banner图一致。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 757px;
				height: 500px;
			}
			/* 显示一张图片的宽高 */
			.box{
				width: 757px;
				height: 500px;
				border: 1px solid red;
				overflow: hidden;
				margin: 0 auto;
			}
						/*所有图片总宽度 */
			.box .imgs{
			   width: 2271px;	
			   height: 500px;
			   /* 图片不换行 */
			   white-space: nowrap;
			   /* =================== */
			   animation: mybox 6s steps(3) infinite;
			}
			
			@keyframes mybox{
				/* ================== */
				0%{
					transform: translateX(0);
				}
				
				100%{
					transform: translateX(-2271px);
				}
			}
			
		</style>
	</head>
	<body>
	   <div class="wrapper">
		   <!-- 显示一张图片宽高 -->
		   <div class="box">
			   <!-- 显示3张图片的宽高 -->
			    <!-- 照片自行更换 -->
			   <div class="imgs">
				   <img src="./img/3.png" alt="">
				   <img src="./img/4.png" alt="">
				   <img src="./img/5.png" alt="">
			   </div>
		   </div>
	   </div>
	</body>
</html>

lm778

关注

5
点赞
踩
45

收藏

觉得还不错? 一键收藏
2
评论
纯html+css制作banner轮播图

应用css3高级特效 translateX,一般的滑动轮播图都是在水平方向上的滑动，原理是：在一个盒子里面把所需用到的图片放里面，进行float浮动，经过浮动后的元素是没有的间隙的，然后在装图片的盒子外边再外套一个盒子，进行溢出隐藏over-flow:hidden。装图片的盒子宽度是与所有图片的宽高一直，外套盒子宽高与一张banner图一致。/* 显示一张图片的宽高 *//*所有图片总宽度 *//* 图片不换行 */.........
复制链接

扫一扫