3d背景图显示

冷不防 2022-10-31 12:30 216阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		 <style type="text/css">
    		 	*{ 
    				margin: 0;
    				padding: 0;
    			}
    			body,html{ 
    				height: 100%;
    			}
    			
    			section{ 
    				width: 100%;
    				height: 100%;
    				background: url(tu/pic1.jpg);
    			}
    			section  img{ 
    				display: block;
    				width: 100%;
    				height: 100%; 
    				/* 合并到一起 */
    				position: fixed;
    				/* 默认显示透明 */
    				opacity: 0;
    				 transition: all 1s  linear;
    				
    			}
    			.btnBox{ 
    				width: 750px;
    				height: 150px;
    				/* background: pink; */
    				position: fixed;
    				bottom: 50px;
    				left: 260px;
    				
    			}
    			.btnBox  a{ 
    				width: 120px;
    				height: 120px;
    				border: 5px  solid  #fffff;
    				display: block;
    				float: left;
    				border-radius: 50%;
    				box-shadow: 0px  5px  10px  black;
    				margin-left: 20px;
    				background-color: black;
    				/* opacity: 0.8; */
    				transition: all  .8s linear ;
    			}
    			.btnBox  a:hover{ 
    				opacity: 1;
    				transform: rotate(360deg);
    			}
    			
    			.btnBox  a:nth-child(1){ 
    				background: url(tu/pic1.jpg) no-repeat center;
    			}
    			.btnBox  a:nth-child(2){ 
    				background: url(tu/pic2.jpg) no-repeat center;
    			}
    			.btnBox  a:nth-child(3){ 
    				background: url(tu/pic3.jpg) no-repeat center;
    			}
    			.btnBox  a:nth-child(4){ 
    				background: url(tu/pic4.jpg) no-repeat center;
    			}
    			.btnBox  a:nth-child(5){ 
    				background: url(tu/pic5.jpg) no-repeat center;
    			}
    			/* 默认效果 */
    			 section  img:nth-child(1){ 
    				 transform: translateX(-100%);
    				 
    			 } 
    			 /* 当点击的效果 */
    			 section  img:nth-child(1):target{ 
    				 opacity: 1;
    				 /* 位移回来 */
    				 transform: translateX(0);
    			 }
    			 section  img:nth-child(1):target{ 
    			 				 opacity: 1;
    			 				 /* 位移回来 */
    			 				 transform: translateX(0);
    			 }
    			section  img:nth-child(2){ 
    							  
    							 /* 位移回来 */
    							 transform: translateX(-100%);
    			}
    			section  img:nth-child(2):target{ 
    							 opacity: 1;
    							 /* 位移回来 */
    							 transform: translateX(0);
    			}
    			section  img:nth-child(3){ 
    							  
    							 /* 位移回来 */
    							 transform: scale(0);
    			}
    			section  img:nth-child(3):target{ 
    							 opacity: 1;
    							 /* 位移回来 */
    							 transform: scale(1)  rotate(360deg);
    			}
    			
    			
    			section  img:nth-child(4){ 
    							  
    							 /* 位移回来 */
    							 transform: scale(2);
    			}
    			section  img:nth-child(4):target{ 
    							 opacity: 1;
    							 /* 位移回来 */
    							 transform: scale(1) ;
    			}
    			
    			section  img:nth-child(5){ 
    							  
    							 /* 位移回来 */
    							 transform: scale(2)  translate(-100%,-100%);
    			}
    			section  img:nth-child(5):target{ 
    							 opacity: 1;
    							 /* 位移回来 */
    							 transform: scale(2) translate(0%,0%) ;
    			}
    		 </style>
    		 
    	</head>
    	<body>
    		 <section>
    			 <img  id="pic1" src="tu/pic1.jpg" >
    			 <img  id="pic2" src="tu/pic2.jpg" >
    			 <img  id="pic3" src="tu/pic3.jpg" >
    			 <img  id="pic4" src="tu/pic4.jpg" >
    			 <img  id="pic5" src="tu/pic5.jpg" >
    		 </section>
    		  <div  class="btnBox">
    			   <a href="#pic1"></a>
    			   <a href="#pic2"></a>
    			   <a href="#pic3"></a>
    			   <a href="#pic4"></a>
    			   <a href="#pic5"></a>
    		  </div>
    	</body>
    </html>

效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221024/a9bfd66175da4601b2d5ab04ecaf355b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221024/3ad890df4f044c3981d0354f494ba45f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221024/db1082275fbc47139391441a280b0fff.png