效果图
首先先把效果图摆上
功能
可以进行动态交互，当鼠标放到图片上时，图片会旋转放大。
代码
首选，要实现一个简易的可交互的照片墙，我们需要先找到合适的图片，然后就是利用代码实现了。
HTML代码：
使用时，只需要将图片地址换成自己的本地地址即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Wall</title>
<link type="text/css" rel="stylesheet" href="./style2.css">
</head>
<body >
<div class="container">
<img class="pic pic1" src="img/1.jpg">
<img class="pic pic2" src="img/2.jpg">
<img class="pic pic3" src="img/3.jpg">
<img class="pic pic4" src="img/4.jpg">
<img class="pic5 pic" src="img/5.jpg">
<img class="pic6 pic" src="img/6.jpg">
<img class="pic7 pic" src="img/7.jpg">
<img class="pic8 pic" src="img/8.jpg">
<img class="pic9 pic" src="img/9.jpg">
<img class="pic10 pic" src="img/10.jpg">
</div>
<div class="container">
<img class="pic11 pic" src="img/11.jpg">
<img class="pic12 pic" src="img/12.jpg">
<img class="pic13 pic" src="img/13.jpg">
<img class="pic14 pic" src="img/14.jpg">
<img class="pic15 pic" src="img/15.jpg">
<img class="pic16 pic" src="img/16.jpg">
<img class="pic17 pic" src="img/17.jpg">
<img class="pic18 pic" src="img/18.jpg">
<img class="pic19 pic" src="img/19.jpg">
<img class="pic20 pic" src="img/20.jpg">
</div>
</body>
</html>
CSS代码：
*{
margin: 0px;
padding: 0;
}
body{
background: url("img/0.jpg") ;
background-size:100% 100%;
/*background-repeat: no-repeat;*/
/*background-size: auto;*/
}
.container{
width: 960px;
height: 450px;
margin: 30px auto;
position: relative;
}
.pic{
width: 160px
}
.container img:hover{
box-shadow: 35px 35px 35px rgba(50,50,50,0.8);
transform: rotate(0deg) scale(1.5);
z-index: 1;/*代表图片层级，将其设置为最上面的图层*/
}
.container 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;
}
.pic1{
transform: rotate(30deg);
top:90px;
left:600px;
}
.pic2{
left: 170px;
top:0;
transform: rotate(-20deg);
}
.pic3{
buttom: 100px;
right: 100px;
transform: rotate(-5deg);
}
.pic4{
top: 40px;
left: 300px;
transform: rotate(-10deg);
}
.pic5{
buttom: 0px;
left: 830px;
top: 100px;
transform: rotate(20deg);
}
.pic6{
left: 50px;
top: 0px;
transform: rotate(10deg);
}
.pic7{
left: 850px;
top: 0px;
transform: rotate(20deg);
}
.pic8{
buttom: -20px;
top:100px;
transform: rotate(5deg);
}
.pic9{
left: 550px;
top:-10px;
transform: rotate(15deg);
}
.pic10{
left: 400px;
top:-20px;
transform: rotate(-5deg);
}
.pic11{
left: 200px;
top:0;
transform: rotate(-30deg);
}
.pic12{
buttom: 100px;
right: 100px;
transform: rotate(-5deg);
}
.pic13{
top: 50px;
left: 300px;
transform: rotate(-10deg);
}
.pic14{
buttom: 0px;
top: -250px;
transform: rotate(15deg);
}
.pic15{
left: 0px;
top: -100px;
transform: rotate(10deg);
}
.pic16{
left: 880px;
top: -50px;
transform: rotate(20deg);
}
.pic17{
left: 50px;
top:30px;
transform: rotate(25deg);
}
.pic18{
left: 550px;
top:50px;
transform: rotate(15deg);
}
.pic19{
left: 400px;
top: 0px;
transform: rotate(-20deg);
}.pic20 {
left: 790px;
top: 50px;
transform: rotate(20deg);
}
转载于(4条消息) HTML+CSS实现简易可交互照片墙_never_say_never7的博客-CSDN博客