一、 CSS3鼠标悬停相册预览特效

我不是女神ヾ 2022-11-11 13:25 201阅读 0赞

### 文章目录 ###

*  一、9款CSS3鼠标悬停相册预览特效
 *   *  1.1 图片预览
     *  1.2 html代码
     *  1.3 main.css代码
     *  1.4 sim-prev-anim.css代码
     *  1.5 所用图片

--------------------

# 一、9款CSS3鼠标悬停相册预览特效 #

## 1.1 图片预览 ##

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

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

## 1.2 html代码 ##

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>9款CSS3鼠标悬停相册预览特效</title>
    
    <link href="css/main.css" rel="stylesheet" type="text/css"/>
    <link href="css/sim-prev-anim.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
    
    <div class="albums">
    <div class="albums-inner">
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-1">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    <img src="images/studio_0005.jpg" class="all studio"/>
    <img src="images/studio_0006.jpg" class="all studio"/>
    <img src="images/studio_0001.jpg" class="all studio"/>
    </div>
    <div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>
    </div>
    
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-2">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    <img src="images/studio_0010.jpg" class="all studio"/>
    
    </div>
    <div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>
    </div>
    
    
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-3">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    <img src="images/studio_0005.jpg" class="all studio"/>
    <img src="images/studio_0006.jpg" class="all studio"/>
    <img src="images/studio_0007.jpg" class="all studio"/>
    <img src="images/studio_0008.jpg" class="all studio"/>
    <img src="images/studio_0011.jpg" class="all studio"/>
    
    </div>
    <div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>
    </div>
    
    
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-4">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    <img src="images/studio_0005.jpg" class="all studio"/>
    <img src="images/studio_0006.jpg" class="all studio"/>
    <img src="images/studio_0007.jpg" class="all studio"/>
    <img src="images/studio_0008.jpg" class="all studio"/>
    <img src="images/studio_0009.jpg" class="all studio"/>
    
    </div>
    <div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>
    </div>
    
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-5">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    <img src="images/studio_0005.jpg" class="all studio"/>
    
    </div>
    <div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>
    </div>
    
    
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-6">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0009.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    <img src="images/studio_0005.jpg" class="all studio"/>
    <img src="images/studio_0006.jpg" class="all studio"/>
    <img src="images/studio_0007.jpg" class="all studio"/>
    <img src="images/studio_0008.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    </div>
    <div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>
    </div>
    
    
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-7">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    
    </div>
    <div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>
    </div>
    
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-8">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    <img src="images/studio_0009.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    <img src="images/studio_0005.jpg" class="all studio"/>
    <img src="images/studio_0006.jpg" class="all studio"/>
    <img src="images/studio_0007.jpg" class="all studio"/>
    <img src="images/studio_0008.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    </div>
    <div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>
    </div>
    
    <div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-9">
    <img src="images/studio_0001.jpg" class="all studio"/>
    <img src="images/studio_0002.jpg" class="all studio"/>
    <img src="images/studio_0003.jpg" class="all studio"/>
    <img src="images/studio_0004.jpg" class="all studio"/>
    <img src="images/studio_0005.jpg" class="all studio"/>
    <img src="images/studio_0009.jpg" class="all studio"/>
    <img src="images/studio_0007.jpg" class="all studio"/>
    <img src="images/studio_0008.jpg" class="all studio"/>
    <img src="images/studio_0006.jpg" class="all studio"/>
    </div>
    <div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>
    </div>
    
    
        </div>
    
    </div>
    
    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>
    </body>
    </html>

## 1.3 main.css代码 ##

body { 
    	margin: 0px;
    	padding: 0px;
    	background-color: #C3CCD5;
    	font-family: 'Source Sans Pro', sans-serif;
    }
    .albums{ 
    	width: 100%;
        float: left;
    }
    .albums-inner{ 
    	width: 1100px;
    	margin-top: 20px;
    	margin-right: auto;
    	margin-left: auto;
    }
    .albums-title { 
    	float: left;
    	width: 100%;
    	color: rgba(53,117,159,1);
    	font-size: 20px;
    	border-bottom-width: 2px;
    	border-bottom-style: solid;
    	border-bottom-color: rgba(53,117,159,1);
    	line-height: 50px;
    	margin-bottom: 100px;
    }
    .albums-tab{ 
    	float: left;
    	width: 300px;
    	margin-right: 100px;
    	margin-bottom: 100px;
    }
    .albums-tab:nth-child(3n+0) { 
    	margin-right: 0px;
    }
    
    .albums-tab-thumb{ 
    	float: left;
    	width: 300px;
    	height: 200px;
    }
    .albums-tab-thumb img { 
    	height: auto;
    	width: 290px;
    	background-color: rgba(255,255,255,1);
    	padding: 5px;		
    }
    .albums-tab-text{ 
    	float: left;
    	width: 100%;
    	text-align: center;
    	color: rgba(53,117,159,1);
    	margin-top: 15px;
    	font-size: 18px;
    }
    .albums-tab-text span { 
    	font-size: 14px;
    	color: rgba(102,102,102,1);
    }

## 1.4 sim-prev-anim.css代码 ##

.sim-anim-1{ 
    	position: relative;
    	}
    .sim-anim-1 img{ 
    	position: absolute;
    	-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}	
    .sim-anim-1:hover img{ 
    	z-index: 1;
    	}		
    .sim-anim-1:hover img:nth-child(1){ 
    	 -ms-transform: rotate(10deg); 
        -webkit-transform: rotate(10deg); 
        transform: rotate(10deg);
    	}
    .sim-anim-1:hover img:nth-child(2){ 
    	 -ms-transform: rotate(-10deg); 
        -webkit-transform: rotate(-10deg); 
        transform: rotate(-10deg);
    	}
    .sim-anim-1:hover img:nth-child(3){ 
    	-ms-transform: rotate(20deg); 
        -webkit-transform: rotate(20deg); 
        transform: rotate(20deg);
    	}	
    .sim-anim-1:hover img:nth-child(4){ 
    	 -ms-transform: rotate(-20deg); 
        -webkit-transform: rotate(-20deg); 
        transform: rotate(-20deg);
    	}
    .sim-anim-1:hover img:nth-child(5){ 
    	 -ms-transform: rotate(30deg); 
        -webkit-transform: rotate(30deg); 
        transform: rotate(30deg);
    	}
    .sim-anim-1:hover img:nth-child(6){ 
    	 -ms-transform: rotate(-30deg); 
        -webkit-transform: rotate(-30deg); 
        transform: rotate(-30deg);
    	}
    .sim-anim-1:hover img:nth-child(7){ 
        -ms-transform: scale(0.9,0.9); 
        -webkit-transform: scale(0.9,0.9); 
        transform: scale(0.9,0.9); 
    	}	
    	
    	
    .sim-anim-2{ 
    	position: relative;
    	}	
    .sim-anim-2 img{ 
    	position: absolute;
    		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}
    .sim-anim-2:hover img{ 
    	z-index: 1;
    	}			
    .sim-anim-2:hover img:nth-child(1){ 
        -ms-transform: translate(-40%,-80%) rotate(-40deg); 
       	-webkit-transform: translate(-40%,-80%)  rotate(-40deg); 
        transform: translate(-40%,-80%)  rotate(-40deg);
    	}
    .sim-anim-2:hover img:nth-child(2){ 
        -ms-transform: translate(-30%,-60%) rotate(-30deg); 
       	-webkit-transform: translate(-30%,-60%)  rotate(-30deg); 
        transform: translate(-30%,-60%)  rotate(-30deg);
    	}	
    .sim-anim-2:hover img:nth-child(3){ 
        -ms-transform: translate(-20%,-40%) rotate(-20deg); 
       	-webkit-transform: translate(-20%,-40%)  rotate(-20deg); 
        transform: translate(-20%,-40%)  rotate(-20deg);
    	}		
    .sim-anim-2:hover img:nth-child(4){ 
        -ms-transform: translate(-10%,-20%) rotate(-10deg); 
       	-webkit-transform: translate(-10%,-20%)  rotate(-10deg); 
        transform: translate(-10%,-20%)  rotate(-10deg);
    	}
    .sim-anim-2:hover img:nth-child(5){ 
      	-ms-transform: scale(1.1,1.1) rotate(-5deg); 
        -webkit-transform: scale(1.1,1.1) rotate(-5deg); 
        transform: scale(1.1,1.1) rotate(-5deg);
    	}
    	
    	
    .sim-anim-3{ 
    	position: relative;
    	}	
    .sim-anim-3 img{ 
    	position: absolute;
    	-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}
    .sim-anim-3:hover img{ 
    	z-index: 1;
    	}		
    .sim-anim-3:hover img:nth-child(1){ 
        -ms-transform: translate(40%,80%) rotate(-40deg); 
       	-webkit-transform: translate(40%,80%) rotate(-40deg); 
        transform: translate(40%,80%) rotate(-40deg); 
    	}
    .sim-anim-3:hover img:nth-child(2){ 
        -ms-transform: translate(30%,60%)  rotate(-30deg);
       	-webkit-transform: translate(30%,60%)  rotate(-30deg);
        transform: translate(30%,60%)  rotate(-30deg);
    	}	
    .sim-anim-3:hover img:nth-child(3){ 
        -ms-transform: translate(20%,40%) rotate(-20deg); 
       	-webkit-transform: translate(20%,40%)  rotate(-20deg); 
        transform: translate(20%,40%)  rotate(-20deg);
    	}		
    .sim-anim-3:hover img:nth-child(4){ 
        -ms-transform: translate(10%,20%) rotate(-10deg); 
       	-webkit-transform: translate(10%,20%)  rotate(-10deg); 
        transform: translate(10%,20%)  rotate(-10deg);
    	}
    .sim-anim-3:hover img:nth-child(5){ 
        -ms-transform: translate(40%,-80%) rotate(40deg); 
       	-webkit-transform: translate(40%,-80%) rotate(40deg); 
        transform: translate(40%,-80%) rotate(40deg); 
    	}
    .sim-anim-3:hover img:nth-child(6){ 
        -ms-transform: translate(30%,-60%)  rotate(30deg);
       	-webkit-transform: translate(30%,-60%)  rotate(30deg);
        transform: translate(30%,-60%)  rotate(30deg);
    	}	
    .sim-anim-3:hover img:nth-child(7){ 
        -ms-transform: translate(20%,-40%) rotate(20deg); 
       	-webkit-transform: translate(20%,-40%)  rotate(20deg); 
        transform: translate(20%,-40%)  rotate(20deg);
    	}		
    .sim-anim-3:hover img:nth-child(8){ 
        -ms-transform: translate(10%,-20%) rotate(10deg); 
       	-webkit-transform: translate(10%,-20%)  rotate(10deg); 
        transform: translate(10%,-20%)  rotate(10deg);
    	}	
    .sim-anim-3:hover img:nth-child(9){ 
      	-ms-transform: scale(1.1,1.1) ; 
        -webkit-transform: scale(1.1,1.1) ; 
        transform: scale(1.1,1.1) ;
    	}	
    
    
    
    
    .sim-anim-4{ 
    	position: relative;
    	}	
    .sim-anim-4 img{ 
    	position: absolute;
    		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}
    .sim-anim-4:hover img{ 
    	z-index: 1;
    	}
    .sim-anim-4:hover img:nth-child(1){ 
        -ms-transform: translate(-80%,-160%) rotate(-80deg) scale(0.3,0.3);
       	-webkit-transform: translate(-80%,-160%)  rotate(-80deg) scale(0.3,0.3);
        transform: translate(-80%,-160%)  rotate(-80deg) scale(0.3,0.3);
    	}	
    .sim-anim-4:hover img:nth-child(2){ 
        -ms-transform: translate(-70%,-140%) rotate(-70deg) scale(0.4,0.4);
       	-webkit-transform: translate(-70%,-140%)  rotate(-70deg) scale(0.4,0.4);
        transform: translate(-70%,-140%)  rotate(-70deg) scale(0.4,0.4);
    	}		
    .sim-anim-4:hover img:nth-child(3){ 
        -ms-transform: translate(-60%,-120%) rotate(-60deg)  scale(0.5,0.5); 
       	-webkit-transform: translate(-60%,-120%)  rotate(-60deg)  scale(0.5,0.5); 
        transform: translate(-60%,-120%)  rotate(-60deg)  scale(0.5,0.5); 
    	}	
    .sim-anim-4:hover img:nth-child(4){ 
        -ms-transform: translate(-50%,-100%) rotate(-50deg)  scale(0.6,0.6); 
       	-webkit-transform: translate(-50%,-100%)  rotate(-50deg)  scale(0.6,0.6); 
        transform: translate(-50%,-100%)  rotate(-50deg)  scale(0.6,0.6); 
    	}			
    .sim-anim-4:hover img:nth-child(5){ 
        -ms-transform: translate(-40%,-80%) rotate(-40deg) scale(0.7,0.7); 
       	-webkit-transform: translate(-40%,-80%)  rotate(-40deg) scale(0.7,0.7); 
        transform: translate(-40%,-80%)  rotate(-40deg) scale(0.7,0.7); 
    	}
    .sim-anim-4:hover img:nth-child(6){ 
        -ms-transform: translate(-30%,-60%) rotate(-30deg) scale(0.8,0.8);  
       	-webkit-transform: translate(-30%,-60%)  rotate(-30deg) scale(0.8,0.8); 
        transform: translate(-30%,-60%)  rotate(-30deg) scale(0.8,0.8); 
    	}	
    .sim-anim-4:hover img:nth-child(7){ 
        -ms-transform: translate(-20%,-40%) rotate(-20deg) scale(0.9,0.9); 
       	-webkit-transform: translate(-20%,-40%)  rotate(-20deg) scale(0.9,0.9);  
        transform: translate(-20%,-40%)  rotate(-20deg) scale(0.9,0.9); 
    	}		
    .sim-anim-4:hover img:nth-child(8){ 
        -ms-transform: translate(-10%,-20%) rotate(-10deg); 
       	-webkit-transform: translate(-10%,-20%)  rotate(-10deg); 
        transform: translate(-10%,-20%)  rotate(-10deg);
    	}
    .sim-anim-4:hover img:nth-child(9){ 
      	-ms-transform: scale(1.1,1.1) ; 
        -webkit-transform: scale(1.1,1.1) ; 
        transform: scale(1.1,1.1) ;
    	}
    
    
    
    .sim-anim-5{ 
    	position: relative;
    	}	
    .sim-anim-5 img{ 
    	position: absolute;
    		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}	
    .sim-anim-5:hover img{ 
    	z-index: 1;
    	}	
    .sim-anim-5:hover img:nth-child(1){ 
        -ms-transform: translate(0,50%) rotate(-20deg); 
       	-webkit-transform: translate(0,50%) rotate(-20deg); 
        transform: translate(0,50%) rotate(-20deg);
    	}
    	
    .sim-anim-5:hover img:nth-child(2){ 
        -ms-transform: translate(50%,0) rotate(-20deg); 
       	-webkit-transform: translate(50%,0) rotate(-20deg); 
        transform: translate(50%,0) rotate(-20deg);
    	}
    .sim-anim-5:hover img:nth-child(3){ 
        -ms-transform: translate(0,-50%)  rotate(-20deg); 
       	-webkit-transform: translate(0,-50%)  rotate(-20deg); 
        transform: translate(0,-50%)  rotate(-20deg);
    	}	
    .sim-anim-5:hover img:nth-child(4){ 
        -ms-transform: translate(-50%,0)  rotate(-20deg); 
       	-webkit-transform: translate(-50%,0)  rotate(-20deg); 
        transform: translate(-50%,0)  rotate(-20deg);
    	}
    .sim-anim-5:hover img:nth-child(5){ 
    	    -ms-transform: scale(1.1,1.1) rotate(-20deg);
        -webkit-transform: scale(1.1,1.1) rotate(-20deg);
        transform: scale(1.1,1.1) rotate(-20deg);
    	}	
    	
    	
    	
    .sim-anim-6{ 
    	position: relative;
    
    	}	
    .sim-anim-6 img{ 
    	position: absolute;
    	-webkit-transition: all 0.5s ;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}
    .sim-anim-6:hover img{ 
    	z-index: 1;
    	}		
    .sim-anim-6:hover img:nth-child(1){ 
        -ms-transform:translate(-20%,-85%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(-20%,-85%) scale(0.8,0.8) rotate(-20deg); 
        transform: translate(-20%,-85%) scale(0.8,0.8) rotate(-20deg); 
    	}		
    .sim-anim-6:hover img:nth-child(2){ 
        -ms-transform:translate(-80%,45%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(-80%,45%) scale(0.8,0.8) rotate(-20deg); 
        transform: translate(-80%,45%) scale(0.8,0.8) rotate(-20deg);
    	}		
    .sim-anim-6:hover img:nth-child(3){ 
        -ms-transform:translate(20%,85%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(20%,85%) scale(0.8,0.8) rotate(-20deg); 
        transform: translate(20%,85%) scale(0.8,0.8) rotate(-20deg);	
    	}		
    .sim-anim-6:hover img:nth-child(4){ 
        -ms-transform: translate(80%,-45%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(80%,-45%) scale(0.8,0.8) rotate(-20deg); 
        transform: translate(80%,-45%) scale(0.8,0.8) rotate(-20deg); 
    	}	
    .sim-anim-6:hover img:nth-child(5){ 
        -ms-transform:translate(-100%,-40%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(-100%,-40%) scale(0.8,0.8) rotate(-20deg); 
        transform: translate(-100%,-40%) scale(0.8,0.8) rotate(-20deg);
    	}
    .sim-anim-6:hover img:nth-child(6){ 
        -ms-transform:translate(100%,40%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(100%,40%) scale(0.8,0.8) rotate(-20deg); 
        transform: translate(100%,40%) scale(0.8,0.8) rotate(-20deg);
    	}
    .sim-anim-6:hover img:nth-child(7){ 
        -ms-transform:translate(60%,-130%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(60%,-130%) scale(0.8,0.8) rotate(-20deg); 
        transform: translate(60%,-130%) scale(0.8,0.8) rotate(-20deg);
    	}
    .sim-anim-6:hover img:nth-child(8){ 
        -ms-transform:translate(-60%,130%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(-60%,130%) scale(0.8,0.8) rotate(-20deg); 
        transform: translate(-60%,130%) scale(0.8,0.8) rotate(-20deg);
    	}	
    .sim-anim-6:hover img:nth-child(9){ 
         -ms-transform: scale(1.2,1.2) rotate(-20deg); 
       	-webkit-transform: scale(1.2,1.2) rotate(-20deg); 
        transform: scale(1.2,1.2) rotate(-20deg);
    	}			
    	
    
    .sim-anim-7{ 
    	position: relative;
    	}	
    .sim-anim-7 img{ 
    	position: absolute;
    	-webkit-transition: all 0.5s ;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}
    .sim-anim-7:hover img{ 
    	z-index: 1;
    	}
    .sim-anim-7:hover img:nth-child(1){ 
        -ms-transform: translate(0,-40%) scale(0.5,0.5); 
       	-webkit-transform: translate(0,-40%) scale(0.5,0.5); 
        transform: translate(0,-40%) scale(0.5,0.5); 
    	}			
    .sim-anim-7:hover img:nth-child(2){ 
        -ms-transform: translate(0,-20%) scale(0.7,0.7);
       	-webkit-transform: translate(0,-20%) scale(0.7,0.7);
        transform: translate(0,-20%) scale(0.7,0.7); 
    	}		
    .sim-anim-7:hover img:nth-child(3){ 
        -ms-transform: scale(0.9,0.9) ; 
       	-webkit-transform: scale(0.9,0.9); 
        transform: scale(0.9,0.9); 
    	}		
    .sim-anim-7:hover img:nth-child(4){ 
     -ms-transform: translate(0,20%) scale(1.1,1.1); 
       	-webkit-transform: translate(0,20%) scale(1.1,1.1);  
        transform: translate(0,20%) scale(1.1,1.1);  
    	}		
    
    	
    	
    .sim-anim-8{ 
    	position: relative;
    	}	
    .sim-anim-8 img{ 
    	position: absolute;
    	-webkit-transition: all 0.5s ;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}
    .sim-anim-8:hover img{ 
    	z-index: 1;
    	}
    .sim-anim-8:hover img:nth-child(1){ 
        -ms-transform: translate(20%,-80%) scale(0.2,0.2) rotate(-80deg); 
       	-webkit-transform: translate(20%,-80%) scale(0.4,0.2) rotate(-80deg); 
        transform: translate(20%,-80%) scale(0.2,0.2) rotate(-80deg); 
    	}	
    .sim-anim-8:hover img:nth-child(2){ 
        -ms-transform: translate(30%,-60%) scale(0.4,0.4) rotate(-60deg); 
       	-webkit-transform: translate(30%,-60%) scale(0.4,0.4) rotate(-60deg); 
        transform: translate(30%,-60%) scale(0.4,0.4) rotate(-60deg); 
    	}		
    .sim-anim-8:hover img:nth-child(3){ 
        -ms-transform: translate(40%,-40%) scale(0.6,0.6) rotate(-40deg); 
       	-webkit-transform: translate(40%,-40%) scale(0.6,0.6) rotate(-40deg);  
        transform: translate(40%,-40%) scale(0.6,0.6) rotate(-40deg); 
    	}	
    .sim-anim-8:hover img:nth-child(4){ 
        -ms-transform:translate(50%,-20%) scale(0.8,0.8) rotate(-20deg); 
       	-webkit-transform: translate(50%,-20%) scale(0.8,0.8)rotate(-20deg); 
        transform: translate(50%,-20%) scale(0.8,0.8) rotate(-20deg); 
    	}
    .sim-anim-8:hover img:nth-child(5){ 
        -ms-transform: translate(-20%,-80%) scale(0.2,0.2) rotate(80deg); 
       	-webkit-transform: translate(-20%,-80%) scale(0.4,0.2) rotate(80deg); 
        transform: translate(-20%,-80%) scale(0.2,0.2) rotate(80deg); 
    	}			
    .sim-anim-8:hover img:nth-child(6){ 
        -ms-transform: translate(-30%,-60%) scale(0.4,0.4) rotate(60deg); 
       	-webkit-transform: translate(-30%,-60%) scale(0.4,0.4) rotate(60deg); 
        transform: translate(-30%,-60%) scale(0.4,0.4) rotate(60deg); 
    	}			
    .sim-anim-8:hover img:nth-child(7){ 
        -ms-transform: translate(-40%,-40%) scale(0.6,0.6) rotate(40deg); 
       	-webkit-transform: translate(-40%,-40%) scale(0.6,0.6) rotate(40deg);  
        transform: translate(-40%,-40%) scale(0.6,0.6) rotate(40deg); 
    	}		
    .sim-anim-8:hover img:nth-child(8){ 
        -ms-transform:translate(-50%,-20%) scale(0.8,0.8) rotate(20deg); 
       	-webkit-transform: translate(-50%,-20%) scale(0.8,0.8) rotate(20deg); 
        transform: translate(-50%,-20%) scale(0.8,0.8) rotate(20deg); 
    	}		
    .sim-anim-8:hover img:nth-child(9){ 
     -ms-transform: translate(0,20%) scale(1.1,1.1); 
       	-webkit-transform: translate(0,20%) scale(1.1,1.1);  
        transform: translate(0,20%) scale(1.1,1.1);  
    	}		
    	
    	
    	
    .sim-anim-9{ 
    	position: relative;
    	-webkit-perspective: 500px; /* Chrome, Safari, Opera */
        perspective: 500px;
    	
    	}	
    .sim-anim-9 img{ 
    	position: absolute;
    	-webkit-transition: all 0.5s ;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	transition: all 0.5s;
    	}
    .sim-anim-9:hover img{ 
    	z-index: 1;
    	}
    .sim-anim-9:hover img:nth-child(1){ 
         -ms-transform: translate(0,75%) scale(0.7,0.7) rotateX(10deg);
       	-webkit-transform: translate(0,75%)  scale(0.7,0.7) rotateX(10deg);  
        transform: translate(0,75%)  scale(0.7,0.7) rotateX(10deg);
    	
    	}	
    .sim-anim-9:hover img:nth-child(2){ 
         -ms-transform: translate(72%,75%) scale(0.7,0.7) rotateX(10deg);
       	-webkit-transform: translate(72%,75%)  scale(0.7,0.7) rotateX(10deg);  
        transform: translate(72%,75%)  scale(0.7,0.7) rotateX(10deg);
    	}		
    .sim-anim-9:hover img:nth-child(3){ 
         -ms-transform: translate(-72%,75%) scale(0.7,0.7) rotateX(10deg);
       	-webkit-transform: translate(-72%,75%)  scale(0.7,0.7) rotateX(10deg);  
        transform: translate(-72%,75%)  scale(0.7,0.7) rotateX(10deg);
    
    	}	
    .sim-anim-9:hover img:nth-child(4){ 
        -ms-transform: translate(-72%,0) scale(0.7,0.7) rotateX(10deg);
       	-webkit-transform: translate(-72%,0)  scale(0.7,0.7) rotateX(10deg);  
        transform: translate(-72%,0)  scale(0.7,0.7) rotateX(10deg); 
    	  
    	}		
    .sim-anim-9:hover img:nth-child(5){ 
        -ms-transform: translate(72%,0) scale(0.7,0.7) rotateX(10deg);
       	-webkit-transform: translate(72%,0)  scale(0.7,0.7) rotateX(10deg);  
        transform: translate(72%,0)  scale(0.7,0.7) rotateX(10deg);
     
    	}	
    .sim-anim-9:hover img:nth-child(6){ 
        -ms-transform: translate(72%,-70%) scale(0.7,0.7) rotateX(10deg);
       	-webkit-transform: translate(72%,-70%)  scale(0.7,0.7) rotateX(10deg);  
        transform: translate(72%,-70%)  scale(0.7,0.7) rotateX(10deg); 
    	
    	}	
    .sim-anim-9:hover img:nth-child(7){ 
        -ms-transform: translate(-72%,-70%)  scale(0.7,0.7) rotateX(10deg);  
       	-webkit-transform: translate(-72%,-70%)  scale(0.7,0.7) rotateX(10deg);  
        transform: translate(-72%,-70%)  scale(0.7,0.7) rotateX(10deg); 
    	
    	}		
    .sim-anim-9:hover img:nth-child(8){ 
        -ms-transform: translate(0,-70%) scale(0.7,0.7) rotateX(10deg); 
       	-webkit-transform: translate(0,-70%) scale(0.7,0.7) rotateX(10deg);
        transform: translate(0,-70%) scale(0.7,0.7) rotateX(10deg);
     
    	}	
    .sim-anim-9:hover img:nth-child(9){ 
        -ms-transform: scale(0.7,0.7) rotateX(10deg); 
       	-webkit-transform:scale(0.7,0.7) rotateX(10deg);
        transform: scale(0.7,0.7) rotateX(10deg); 
    	}

## 1.5 所用图片 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 7]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/3e7d35bb99db4701b182eb160a82a505.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2021032021014142.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210320210841723.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210320210904143.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210320210910913.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210320210916777.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210320210920899.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210320210931734.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210320210937920.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210320211016491.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210320210942833.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210320210950938.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210320210958844.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4,size_16,color_FFFFFF,t_70