效果图
首先先把效果图摆上
功能
可以进行动态交互，当鼠标放到图片上时，图片会旋转放大。
代码
首选，要实现一个简易的可交互的照片墙，我们需要先找到合适的图片，然后就是利用代码实现了。
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{ 960px; height: 450px; margin: 30px auto; position: relative; } .pic{ 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; 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); }