html打照片墙的代码原理,html+css实现照片墙系统
发布时间：2024-03-16 15:01
实现的功能如下：具有动画和阴影效果
1.实现图片的散乱布局，并且具有一定的倾角。
2.照片改为圆角，具有阴影效果，边缘效果。
3.当鼠标移动到图片时，图片自动旋转放大。
同时可以以手机APP的形式在手机端运行，需要打开开发者模式以及允许安装未知应用。
静态图片布局效果如下：
![\"0818b9ca8b590ca3270a3433284dd417.png\"](\"https://img.it610.com/image/info8/7c5750338adb4a38a50617495a2529dc.jpg\")
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;
}