css实现点击切换图片效果

互联网 20-9-11

我们先来看下效果图：

（相关教程：CSS教程）

切换前：

切换中：

HTML代码：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>来自Limou的尝试解读</title> <link href="CSS/Public.css" rel="stylesheet" type="text/css"> </head>  <body style="background-color:#EAF5FF;"> 		<div><h1>来自Limou的尝试解读</h1></div> 		<div class="button"> 			<a href="#">1</a> 			<a href="#">2</a> 			<a href="#">3</a> 			<a href="#">4</a>  		<div class="Images"> 			<!--选中第一个input--> 			<input id="in-img-1" name="InpitImages" class="cr-in-img-1" type="radio" checked> 			<label for="in-img-1" class="la-checkLabel-1">1</label>  			<input id="in-img-2" name="InpitImages" class="cr-in-img-2" type="radio"> 			<label for="in-img-2" class="la-checkLabel-2">2</label>  			<input id="in-img-3" name="InpitImages" class="cr-in-img-3" type="radio"> 			<label for="in-img-3" class="la-checkLabel-3">3</label>  			<input id="in-img-4" name="InpitImages" class="cr-in-img-4" type="radio"> 			<label for="in-img-4" class="la-checkLabel-4">4</label> 			<div class="SpanStyle"> 				<div> 					<span>Images1</span> 					<span>Images2</span> 					<span>Images3</span> 					<span>Images4</span> 				</div> 				<div> 					<span>Images1</span> 					<span>Images2</span> 					<span>Images3</span> 					<span>Images4</span> 				</div> 				<div> 					<span>Images1</span> 					<span>Images2</span> 					<span>Images3</span> 					<span>Images4</span> 				</div> 				<div> 					<span>Images1</span> 					<span>Images2</span> 					<span>Images3</span> 					<span>Images4</span> 				</div> 			</div> 			<div class="h3Span"> 				<h3><span>我的世界</span><span>钻石</span></h3> 				<h3><span>小动物</span><span>松鼠</span></h3> 				<h3><span>上古卷轴</span><span>雪漫城随从</span></h3> 				<h3><span>守望先锋</span><span>不知道是谁</span></h3> 			</div> 		</div>     </div> </body>  	 </html>

@charset "utf-8"; /* CSS Document */  h1{ 	text-align: center; 	color:deepskyblue; 	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);/*设置字体的阴影*/ } /*顶部a标签动画与样式  开始*/ .button{ 	text-align: center; 	height: 80px; 	width: 100%; 	display: block; } .button a{ 	height: 60px; 	width: 60px; 	display: inline-block;/*布局属性：内联-块， 	使其成为并排显示的块级元素，让其宽高可以编辑，且宽高和内外边距可以超过父级元素*/ 	text-decoration: none;/*去除下划线*/ 	line-height: 60px; 	border-radius: 50%; 	/*设置字符的行高，通常用于自定义的某些样式，字符在顶部或底部时使用，让其上下居中*/ 	background-color: rgba(104,171,194,0.5); 	transition:background-color 0.15s linear;/*组合写法*/ 	/*transition-property	规定设置过渡效果的 CSS 属性的名称。 				-duration	规定完成过渡效果需要多少秒或毫秒。 				-timing-function	规定速度效果的速度曲线。 				-delay	定义过渡效果开始时间。*/ 	color: white; } .button a:hover{ 	background-color: rgba(255,255,255); 	color:#68ABC2; 	transition:background-color 0.15s linear; } /*顶部a标签动画与样式  开始*/   /*图片的样式与动画  开始*/ .SpanStyle{ 	width: 100%; 	height: 400px; 	z-index: 1; 	position: absolute; 	top: 0; 	background-repeat: no-repeat; 	background-size: 100% 100%; 	background-position: 0 0; } .SpanStyle div{ 	width: 25%; 	height: 100%; 	float: left; 	position: relative; 	overflow: hidden; 	background-repeat: no-repeat; } .SpanStyle div span{ 	position: absolute; 	width: 100%; 	height: 100%; 	top: 0px; 	left: -100%;/*设置元素初始位置，为动画准备*/ 	z-index: 2; 	color: rgba(255,255,255,0); 	background-repeat: no-repeat; 	background-size: 400% 100%; }  /*设置图片在元素的位置*/ .SpanStyle div:nth-child(1) span{ 	background-position: 0% 0px; } .SpanStyle div:nth-child(2) span{ 	background-position: 33.5% 0px; } .SpanStyle div:nth-child(3) span{ 	background-position: 66.5% 0px; } .SpanStyle div:nth-child(4) span{ 	background-position: 100% 0px; }  /*父级元素下的 某个input标签和 它的类名:选中后匹配元素(单复选框专用) ~  一个父级元素下的div里面的Span元素:匹配元素(第N个) */ /*定义指定的input标签点击后将匹配的元素绑定新图片*/ .Images input.cr-in-img-1:checked ~ .SpanStyle,  .SpanStyle div span:nth-child(1){ 	background-image: url(../images/1.jpg); } .Images input.cr-in-img-2:checked ~ .SpanStyle, .SpanStyle div span:nth-child(2){ 	background-image: url(../images/2.jpg); } .Images input.cr-in-img-3:checked ~ .SpanStyle, .SpanStyle div span:nth-child(3){ 	background-image: url(../images/3.jpg); } .Images input.cr-in-img-4:checked ~ .SpanStyle, .SpanStyle div span:nth-child(4){ 	background-image: url(../images/4.jpg); }  /*定义指定的input标签点击后将绑定的新图片所在的元素插入*/ .Images input.cr-in-img-1:checked ~ .SpanStyle div span:nth-child(1), .Images input.cr-in-img-2:checked ~ .SpanStyle div span:nth-child(2), .Images input.cr-in-img-3:checked ~ .SpanStyle div span:nth-child(3), .Images input.cr-in-img-4:checked ~ .SpanStyle div span:nth-child(4) { 	animation: none; 	transition: left 0.8s ease-in-out; 	left: 0%; 	z-index: 10; }  /*定义指定的input标签点击后将要替换的旧图片所在的元素撤出*/ .Images input:checked ~ .SpanStyle div span{ 	animation: slideOut 0.8s ease-in-out; }  @keyframes slideOut{ 	0%{ left: 0%; } 	100%{ left: 100%; } } /*图片的样式与动画  结束*/   /*文本动画与样式  开始*/ .Images{ 	height: 400px; 	width: 40%; 	text-align: center; 	position: relative; 	margin: 2% auto 0 auto; 	border: 20px solid #fff; 	box-shadow: 1px 1px 3px rgba(0,0,0,0.1); } .Images input{ 	display: none; } .Images label{ 	font-style: italic; /*字体样式：倾斜*/ 	margin-top: 350px; 	text-align: center; 	width: 25%; 	height: 30px; 	cursor: pointer;/*光标：手*/ 	color: #fff; /*字体颜色*/ 	position: relative; 	float: left; 	line-height: 34px; 	font-size: 24px;/*字号，字体大小*/ 	z-index: 5; } .Images label:before{ 	content:'';/*绑定文本也可以绑定文件*/ 	width: 34px; 	height: 34px; 	background: rgba(130,195,217,0.9); 	position: absolute; 	left: 50%; 	margin-left: -14px; 	border-radius: 50%; 	box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3); 	z-index:-1; } .Images label:after{ 	width: 1px; 	height: 400px; 	content: ''; 	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);     position: absolute; 	bottom: -20px; 	right: 0px; }  .h3Span h3{ 	position: absolute; 	width: 100%; 	top: 45%; 	z-index: 10; 	text-align: center; 	opacity: 0; 	color: #fff; 	text-shadow: 1px 1px 1px rgba(0,0,0,0.1); 	transition: opacity 0.8s ease-in-out; } .h3Span h3 span{ 	z-index: 10; 	position: absolute; 	width: 100%; 	left: 0px; 	text-align: center; 	opacity: 1; } .h3Span h3 span:nth-child(1){ 	font-family: 'NSimSun'; 	font-size: 50px;     display: block;     letter-spacing: 7px; } .h3Span h3 span:nth-child(2){ 	margin-top: 84px; 	letter-spacing: 0px; 	background: rgba(104,171,194,0.9); 	font-size: 14px; 	padding: 10px 0px; 	font-style: italic; 	transition: opacity 0.8s ease-in-out; }  .Images input.cr-in-img-1:checked ~ .h3Span h3:nth-child(1), .Images input.cr-in-img-2:checked ~ .h3Span h3:nth-child(2), .Images input.cr-in-img-3:checked ~ .h3Span h3:nth-child(3), .Images input.cr-in-img-4:checked ~ .h3Span h3:nth-child(4){ 	opacity: 1; } /*文本的动画与样式  结束*/   /*页面缩小显示复选框*/ @media screen and (max-width: 1200px) { 	.Images input{ 		display: inline; 		width: 22%; 		margin-top: 350px; 		z-index: 10; 		position: relative; 	} 	.Images label{ 		display: none; 	} }

以上就是css实现点击切换图片效果的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：图片