<html>
<head>
<title>照片墙案例</title>
<meta charset="UTF-8"/>
</head>
<style type="text/css">
body
{
background-color: gray;/*背景色*/
text-align: center;/*照片居中*/
}
img{
width: 12%;/*设置高度*/
padding: 10px;/*设置内边距*/
background-color: white;/*设置照片背景色*/
transform: rotate(-10deg);/*设置倾斜角度*/
margin: 20px;/*设置内边距*/
}
img:hover{
transform: rotate(0deg); scale(2.5);/*设置旋转角度和缩放比例*/
z-index: 1;/*设置显示优先级别*/
transition: 1.5s;/*是指显示时间*/
}
</style>
<body>
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<br /><br />
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
<img src="img/7.jpg" alt="" />
<img src="img/8.jpg" alt="" />
</body>
</html>效果展示：
