鼠标悬浮实现各种图片散开的特效

其他 2019-01-18 00:50:51 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CNZSWYMP/article/details/76053457 

通CSS实现各种图片散开特效，当鼠标悬停在第一张图片上时，图片散开。如下面几幅图。

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: 300px;
	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);
}

CSS代码部分2

.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); 
	}

html部分

!-- 代码部分begin -->
<div class="albums">
<div class="albums-inner">

<div class="albums-tab">
    <div class="albums-tab-thumb sim-anim-1">
        <img src="../.idea/发型/1.jpg" class="all studio"/>
        <img src="../.idea/发型/2.jpg" class="all studio"/>
        <img src="../.idea/发型/3.jpg" class="all studio"/>
        <img src="../.idea/发型/4.jpg" class="all studio"/>
        <img src="../.idea/发型/5.jpg" class="all studio"/>
        <img src="../.idea/发型/6.jpg" class="all studio"/>
        <img src="../.idea/发型/7.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="../.idea/发型/5.jpg" class="all studio"/>
        <img src="../.idea/发型/4.jpg" class="all studio"/>
        <img src="../.idea/发型/3.jpg" class="all studio"/>
        <img src="../.idea/发型/2.jpg" class="all studio"/>
        <img src="../.idea/发型/1.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="../.idea/发型/a.jpg" class="all studio"/>
        <img src="../.idea/发型/8.jpg" class="all studio"/>
        <img src="../.idea/发型/7.jpg" class="all studio"/>
        <img src="../.idea/发型/6.jpg" class="all studio"/>
        <img src="../.idea/发型/5.jpg" class="all studio"/>
        <img src="../.idea/发型/4.jpg" class="all studio"/>
        <img src="../.idea/发型/3.jpg" class="all studio"/>
        <img src="../.idea/发型/2.jpg" class="all studio"/>
        <img src="../.idea/发型/b.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="../.idea/发型/4.jpg" class="all studio"/>
        <img src="../.idea/发型/8.jpg" class="all studio"/>
        <img src="../.idea/发型/7.jpg" class="all studio"/>
        <img src="../.idea/发型/6.jpg" class="all studio"/>
        <img src="../.idea/发型/5.jpg" class="all studio"/>
        <img src="../.idea/发型/4.jpg" class="all studio"/>
        <img src="../.idea/发型/3.jpg" class="all studio"/>
        <img src="../.idea/发型/2.jpg" class="all studio"/>
        <img src="../.idea/发型/c.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="../.idea/发型/8.jpg" class="all studio"/>
        <img src="../.idea/发型/7.jpg" class="all studio"/>
        <img src="../.idea/发型/6.jpg" class="all studio"/>
        <img src="../.idea/发型/5.jpg" class="all studio"/>
        <img src="../.idea/发型/4.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="../.idea/发型/6.jpg" class="all studio"/>
        <img src="../.idea/发型/8.jpg" class="all studio"/>
        <img src="../.idea/发型/7.jpg" class="all studio"/>
        <img src="../.idea/发型/6.jpg" class="all studio"/>
        <img src="../.idea/发型/5.jpg" class="all studio"/>
        <img src="../.idea/发型/4.jpg" class="all studio"/>
        <img src="../.idea/发型/3.jpg" class="all studio"/>
        <img src="../.idea/发型/2.jpg" class="all studio"/>
        <img src="../.idea/发型/b.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="../.idea/发型/e.jpg" class="all studio"/>
        <img src="../.idea/发型/8.jpg" class="all studio"/>
        <img src="../.idea/发型/7.jpg" class="all studio"/>
        <img src="../.idea/发型/3.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="../.idea/发型/h.jpg" class="all studio"/>
        <img src="../.idea/发型/6.jpg" class="all studio"/>
        <img src="../.idea/发型/1.jpg" class="all studio"/>
        <img src="../.idea/发型/3.jpg" class="all studio"/>
        <img src="../.idea/发型/4.jpg" class="all studio"/>
        <img src="../.idea/发型/2.jpg" class="all studio"/>
        <img src="../.idea/发型/5.jpg" class="all studio"/>
        <img src="../.idea/发型/8.jpg" class="all studio"/>
        <img src="../.idea/发型/2.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="../.idea/发型/c.jpg" class="all studio"/>
        <img src="../.idea/发型/8.jpg" class="all studio"/>
        <img src="../.idea/发型/7.jpg" class="all studio"/>
        <img src="../.idea/发型/6.jpg" class="all studio"/>
        <img src="../.idea/发型/5.jpg" class="all studio"/>
        <img src="../.idea/发型/4.jpg" class="all studio"/>
        <img src="../.idea/发型/3.jpg" class="all studio"/>
        <img src="../.idea/发型/2.jpg" class="all studio"/>
        <img src="../.idea/发型/c.jpg" class="all studio"/>
    </div>
    </div>


猜你喜欢

转载自blog.csdn.net/CNZSWYMP/article/details/76053457
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022