html打照片墙的代码原理,html+css实现照片墙系统

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

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

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

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

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

静态图片布局效果如下：

index.html:

hidden="true" autostart="true" loop="true" >

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;

}