Html
    Css
    Js

    
                        
@charset "utf-8";
	body {
	background:gainsboro;
}
.div_pic {
	width:900px;
	height:450px;
	margin:60px auto;
}
.p {
	/*内边距*/
	padding:10px 10px 10px;
	background:white;
	/*背景*/
	/*左移,下移,虚化*/
	box-shadow:5px 5px 4px rgba(50,50,50,0.5);
	width:150px;
	/*相对定位*/
	position:relative;
}
/*每张图片倾斜角度*/
.p1 {
	transform:rotate(-5deg);
}
.p2 {
	transform:rotate(9deg);
}
.p3 {
	transform:rotate(14deg);
}
.p1 {
	transform:rotate(2deg);
}
.p4 {
	transform:rotate(-3deg);
}
.p5 {
	transform:rotate(8deg);
}
.p6 {
	transform:rotate(2deg);
}
.p7 {
	transform:rotate(-1deg);
}
.p8 {
	transform:rotate(1deg);
}
.p9 {
	transform:rotate(-5deg);
}
.div_pic img:hover {
	/*旋转角度变回0*/
	transform:rotate(0deg) scale(1.5);
	z-index:9;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS照片墙

仅利用CS实现照片墙效果。通过对图片内边距和阴影的设置,使用相对定位和向框添加一个阴影,利用transform属性让每个图片以适当的角度旋转,当鼠标指针悬停在上面时水平和垂直的放到原来的1.5倍,显示在最上面。

0