问答详情
源自:-

照片没有hover效果???

照片没有hover效果???

body{
	background-color:#eee;
}
h1{
	text-align:center;
}
.container{
	width:960px; 
	height:450px; 
	margin:60px auto; 
	position:relative;
}
.container img{
	padding:10px 10px 15px; 
	background:white; 
	border:1px solid #ddd; 
	box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
	-webkit-transition:all 0.5s ease-in;
	-moz-transition:all 0.5s ease-in;
	transition:all 0.5s ease-in; 
	position:absolute; 
	z-index:1;
}
.container img:hover{
	box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
	-webkit-transform:rotate(0deg) scale(1.20); 
	-moz-transform:rotate(0deg) scale(1.20); 
	transform:rotate(0deg) scale(1.20); 
	z-index:2;
}
.pic1{
	left: 400px; 
	top: 0; 
	-webkit-transform: rotate(-5deg); 
	-moz-transform: rotate(-5deg); 
	transform: rotate(-5deg);
}
.pic2{
	top: 0; 
	left: 600px; 
	-webkit-transform: rotate(-20deg); 
	-moz-transform: rotate(-20deg); 
	transform: rotate(-20deg);
}
.pic3
{
	bottom: 0; 
	right: 0; 
	-webkit-transform: rotate(5deg); 
	-moz-transform: rotate(5deg); 
	transform: rotate(5deg);
}
	
.pic4
{
	bottom:0; 
	left:300px; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}
.pic5
{
	bottom: 0; 
	left: 0; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}
.pic6
{
	top: 0; 
	left:0; 
	-webkit-transform: rotate(10deg); 
	-moz-transform: rotate(10deg); 
	transform: rotate(10deg);
}
.pic7
{
	top: 0; 
	left: 850px; 
	-webkit-transform: rotate(20deg); 
	-moz-transform: rotate(20deg); 
	transform: rotate(20deg);
}
.pic8
{
	bottom: -20px; 
	right: 630px; 
	-webkit-transform: rotate(5deg); 
	-moz-transform: rotate(5deg); 
	transform: rotate(5deg);
}
.pic9
{
	top: 90px; 
	left: 550px; 
	-webkit-transform: rotate(15deg); 
	-moz-transform: rotate(15deg); 
	transform: rotate(15deg);
}
.pic10
{
	left:180px; 
	top:20px; 
	-webkit-transform: rotate(-10deg); 
	-moz-transform: rotate(-10deg); 
	transform: rotate(-10deg);
}


提问者:Blizzard_lihe 2016-11-17 16:57

个回答