伸缩相册全-定位，label标签，波浪号选择符，translate属性

最新推荐文章于 2022-02-08 14:31:52 发布

cyzfd_sunshine

最新推荐文章于 2022-02-08 14:31:52 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/cyzfd_sunshine/article/details/85067630

版权

思路：

点击 ~ label

单选框

border-radius圆角量法：检测弯曲幅度， width。

重叠和定位有关。如果写border，定位不会越过它，如果写padding，定位会越过它定位。

把图片当作label背景。

要设置name的原因是每次只需要选中一个。

.box input{display: none;}去除隐含的单选框。

1.效果

2.HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vera Test</title>
<link rel="stylesheet" type="text/css" href="style/photo.css" />
</head>
<body>
	<div class="box">
		<form>
			<label for="img1"></label>
			<input type='radio' id='img1' name="img"/>

			<label for="img2"></label>
			<input type='radio' id='img2' name="img"/>

			<label for="img3"></label>
			<input type='radio' id='img3' name="img"/>

			<label for="img4"></label>
			<input type='radio' id='img4' name="img"/>

			<label for="img5"></label>
			<input type='radio' id='img5' name="img"/>

			<label for="img6"></label>
			<input type='radio' id='img6' name="img"/>
		</form>
	</div>
</body>
</html>

3.CSS

.box{
	width: 664px;
	height: 406px;
	border-radius: 9px;
	margin:50px auto;
	position: relative;
	border:18px solid #5d75b1;  /*写border而不是padding*/
	overflow: hidden;
}

.box label{
	width: 300px;
	height: 400px;
	border: 2px solid #16254c;
	position: absolute;
	top: 0;
	transition:1s;
}
.box  input{display: none;}

.box label:nth-of-type(1){
	background: url(../images/pic1.png) ;
	left: 0px;
}
.box label:nth-of-type(2){
	background: url(../images/pic2.png) ;
	left: 72px;
}
.box label:nth-of-type(3){
	background: url(../images/pic3.png) ;
	left: 144px;
}
.box label:nth-of-type(4){
	background: url(../images/pic4.png) ;
	left: 216px;
}
.box label:nth-of-type(5){
	background: url(../images/pic5.png) ;
	left: 288px;
}
.box label:nth-of-type(6){
	background: url(../images/pic6.png) ;
	left:360px;
}

.box input:checked~label{ /*选中的下面全部的label标签*/
	transform:translateX(230px);
	-webkit-transform:translateX(230px);/*兼容谷歌*/
}

cyzfd_sunshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伸缩相册全-定位，label标签，波浪号选择符，translate属性

思路：点击 ~ label单选框border-radius圆角量法：检测弯曲幅度， width。重叠和定位有关。如果写border，定位不会越过它，如果写padding，定位会越过它定位。把图片当作label背景。要设置name的原因是每次只需要选中一个。.box input{display: none;}去除隐含的单选框。1.效果2.HTML&...
复制链接

扫一扫