HTML5--纯CSS轮播图

最新推荐文章于 2024-05-28 19:26:08 发布

柳落青

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/S0001100/article/details/102224651

版权

HTML及CSS基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

1.以下是HTML代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<link rel="stylesheet" href="lbimage1.css" type="text/css" />
	</head>

	<body>
		<div class="photo" id="photo">
			<!--//1-->
			<input type="radio" name="btn" id="img1" checked/>
			<div class="control">
				<div class="image"><img src="img/5c8f287d5731a.jpg"></div>
				<div class="nav">
					<!--尖括号聚焦在单选按钮上-->
					<label for="img2" class="up leftjianbian"><</label>
					<label for="img2" class="down rightjianbian">></label>
				</div>
			</div>
			<!--//2-->
			<input type="radio" name="btn" id="img2" />
			<div class="control">
				<div class="image"><img src="img/5c8f2881c252d.jpg" /></div>
				<div class="nav">
					<label for="img1" class="up leftjianbian"><</label>
					<label for="img1" class="down rightjianbian">></label>
				</div>
			</div>

			<div class="dots">
				<label for="img1" class="dot" id="dot1"></label>
				<label for="img2" class="dot" id="dot2"></label>
			</div>
		</div>
	</body>

</html>

2.以下是CSS代码：实现原理：利用单选按钮和label标签

@charset "utf-8";

img {
	width: 850px;
	height: 500px;
}

.photo {
	width: 900px;
	height: 550px;
	border: 1px solid #555555;
	margin: 0 auto;
	position: relative;		/*父级div设置相对定位*/
	background: #ffffff;
	box-shadow: 0 10px 80px rgba(0, 0, 0, .6)	/*父级div外框阴影 x轴没有阴影 y轴底部10px阴影 阴影模糊半径80px 阴影颜色*/
}

.photo input {
	display: none;
}

.image {
	position: absolute;		/*设置绝对定位*/
	top: 0px;
	left: 0px;
	width: 800px;
	height: 450px;
	margin: 25px 25px;
	transform: scale(0);	/*缩放*/
	opacity: 0;				/*初始透明度为0 不透明*/
	transition: all 0.7s;	/*初始状态  all 过渡所需要的时间*/
}

.nav label {
	width: 150px;		/*宽度150px*/
	height: 500px;		/*高度500px*/
	margin: 25px 25px;	/*四条边外边距25px*/
	position: absolute;	/*设置绝对定位*/
	z-index: 10;		/*层级10*/
	opacity: 0;			/*透明度初始值为0 不透明*/
	display: none;		/*隐藏尖括号*/
	cursor: pointer;
	transition: opacity 0.2s;
	color: #ffffff;		/*尖括号颜色白色*/
	font-size: 50px;	/*字体大小50px*/
	line-height: 450px;	/*尖括号行距450px 这里想当于垂直居中*/
	text-align: center;	/*文本居中*/
	text-shadow: 0 0 15px #555555);		/*文本阴影*/
}

.leftjianbian {  /*背景渐变：渐变方向	起始颜色	结束颜色*/
	background: linear-gradient(right, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
	background: -o-linear-gradient(right, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
	background: -ms-linear-gradient(right, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
	background: -moz-linear-gradient(right, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
	background: -webkit-linear-gradient(right, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
}

.rightjianbian {
	background: linear-gradient(left, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
	background: -o-linear-gradient(left, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
	background: -ms-linear-gradient(left, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
	background: -moz-linear-gradient(left, rgba(250, 242, 239, 0) 1%, rgba(158, 148, 166, 0.5) 100%);
	background: -webkit-linear-gradient(left, rgba(250, 242, 239, 0) 10%, rgba(158, 148, 166, 0.5) 100%);
}

.image:hover+.nav label {	/*当鼠标悬停在图片上，显示尖括号，透明度为0.5*/
	opacity: 0.5;
}

.nav label:hover {	/*当鼠标悬停在尖括号上，尖括号透明度为1*/
	opacity: 1;
}

.nav .down {
	right: 0;		/*设置尖括号在盒子右边*/
}

input:checked+.control .image {		/*当单选按钮被被勾选时 图片透明度显示为1，图片缩放为正常大小，过度机制：过度时间1s*/
	opacity: 1;
	transform: scale(1);
	transition: all 1s;
}

input:checked+.control .nav label {	/*当单选按钮勾选时，显示尖括号lable元素*/
	display: block;
}

.dots {
	width: 100%;
	height: 20px;
	position: absolute;
	bottom: 30px;
	text-align: center;
}

.dot {
	width: 10px;
	height: 10px;
	margin: 0px 5px;
	border-radius: 50%;
	position: relative;
	display: inline-block;
	background: rgba(0, 0, 0, 0.3);
}

input#img1:checked~.dots label#dot1,
input#img2:checked~.dots label#dot2,
input#img3:checked~.dots label#dot3,
input#img4:checked~.dots label#dot4,
input#img5:checked~.dots label#dot5,
input#img6:checked~.dots label#dot6 {
	background: rgba(0, 0, 0, 0.7);
}

3.以上代码大多数有注释，可以直接粘贴复制，修改图片路径和div宽度和高度。

柳落青

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML5--纯CSS轮播图

1.以下是HTML代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="lbimage1.css" type="text/css" /...
复制链接

扫一扫