html+css实现照片墙系统

实现的功能如下：具有动画和阴影效果

1.实现图片的散乱布局，并且具有一定的倾角。

2.照片改为圆角，具有阴影效果，边缘效果。

3.当鼠标移动到图片时，图片自动旋转放大。

同时可以以手机APP的形式在手机端运行，需要打开开发者模式以及允许安装未知应用。

静态图片布局效果如下：

index.html:

style.css

*{
	background-color:black;
}

img{
	border-radius: 60px;
	width: 160px;
	height: 160px;
	padding: 10px;
	background-color: white;
	box-shadow: 15px 15px 15px rgba(50,50,50,0.99);
	position: absolute;
	/*绝对定位--利用Left可以手动调整照片位置*/
	/*加入动画效果*/
	transition: all 1s ease-in;
}

img:hover{
	box-shadow: 35px 35px 35px rgba(50,50,50,0.8);
	transform: rotate(0deg) scale(1.5);
	z-index: 1;/*代表图片层级，将其设置为最上面的图层*/
}
div{
	width: 80%;
	height: 450px;
}

.pic1{
	transform: rotate(30deg);
	top:40px;
	left:100px;
}
.pic2{
	transform: rotate(-20deg);
	top:50px;
	left:350px;
}
.pic3{
	transform: rotate(-40deg);
	top:40px;
	left:500px;
}
.pic4{
	transform: rotate(60deg);
	top:50px;
	left:750px;
}
.pic5{
	transform: rotate(60deg);
	top:250px;
	left:50px;
}
.pic6{
	transform: rotate(60deg);
	top:250px;
	left:250px;
}
.pic7{
	transform: rotate(60deg);
	top:250px;
	left:500px;
}
.pic8{
	transform: rotate(20deg);
	top:450px;
	left:50px;
}
.pic9{
	transform: rotate(-10deg);
	top:450px;
	left:250px;
}
.pic10{
	transform: rotate(30deg);
	top:450px;
	left:450px;
}
.pic11{
	transform: rotate(-15deg);
	top:450px;
	left:600px;
}