CSS3新增文本属性实现图片点击切换效果

顺晟科技

2022-09-14 10:56:41

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Keywords" content="关键词">
		<meta name="Description" content="描述">
		<title>CSS3新增文本属性</title>
		<style>
		body{
			background:#ccc;
		}
		#wrap{
			width:640px;
			margin:100px auto;
			box-shadow:0 10px 5px rgba(0,0,0,.7);
			position:relative;
			padding-top:320px;
		}
		#wrap>img{
			position:absolute;left:0px;top:0px;
			transition:all 1s;
		}
		img{
			display:block;
		}
		input{
			display:none;
		}
		label{
			border:10px solid #aaa;
			margin:20px 3px;
			float:left;
			opacity:.5;
			transition:all 1s;
		}
		input:checked + label{
			border:10px solid #fff;
			opacity:1;
		}
		input ~ img{
			opacity:0;
			transform:scale(1.1);
		}
		input:checked + label + img{
			opacity:1;
			transform:scale(1);
		}
		</style>
	</head>
	<body>
		<div id="wrap">
			<input type="radio" name="checked" id="id1" checked >
			<label for="id1">
				<img src="images/1.jpg" width="100">
			</label>
			<img src="images/1.jpg" width="640" height="320">
			<input type="radio" name="checked" id="id2">
			<label for="id2">
				<img src="images/2.jpg" width="100">
			</label>
			<img src="images/2.jpg" width="640" height="320">
			<input type="radio" name="checked" id="id3" >
			<label for="id3">
				<img src="images/3.jpg" width="100">
			</label>
			<img src="images/3.jpg" width="640" height="320">
			<input type="radio" name="checked" id="id4" >
			<label for="id4">
				<img src="images/4.jpg" width="100">
			</label>
			<img src="images/4.jpg" width="640" height="320">
			<input type="radio" name="checked" id="id5" >
			<label for="id5">
				<img src="images/5.jpg" width="100">
			</label>
			<img src="images/5.jpg" width="640" height="320">
		</div>
	</body>
</html>

上一篇：CSS3效果：实现气泡效果下一篇：CSS鼠标点击式变化图片透明度

网站建设

Css

CSS3新增文本属性实现图片点击切换效果