HTML界面
<html>
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="../css/pictureWall.css"/>
</head>
<body>
<h2>照片墙</h2>
<div>
<img src="../picWallImg/01.jpg" width="200px" height="150px"/>
<img src="../picWallImg/02.jpg" width="230px" height="180px"/>
<img src="../picWallImg/03.jpg" width="200px" height="300px"/>
<img src="../picWallImg/04.jpg" width="150px" height="200px"/>
</div>
</body>
</html>
CSS样式设置
*{
padding: 0px;
margin: 0px;
border: 0px;
}
h2{
font-size: 50px;
text-align: center;
}
div{
width: 1100px;
height: 400px;
background-color:#CCCCCC ;
margin: 100px auto;
position: relative;
}
img{
position: absolute;
padding:10px ;
background-color:#fff ;
cursor: pointer;
}
img:nth-of-type(1){
margin-top: 100px;
margin-left:100px ;
transform: rotate(20deg);
z-index: 1;
}
img:nth-of-type(2){
margin-top: 100px;
margin-left:280px ;
transform: rotate(-40deg);
z-index: 2;
}
img:nth-of-type(3){
margin-top: 50px;
margin-left:530px ;
transform: rotate(20deg);
z-index: 3;
}
img:nth-of-type(4){
margin-top: 130px;
margin-left:750px ;
transform: rotate(50deg);
z-index: 2;
}
鼠标悬停动作设置
img:hover{
transform: scale(2);
transition: all 3s;
box-shadow: 10px 10px 30px #ccc;
z-index: 10;
}
结果展示
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
