在线相框制作练习两年半 Rap篮球

展示：

代码
h5:

背带裤

Rap

篮球

坤坤

两年半

css部分

• {
  margin:0px;
  padding:0px;
  }
  .Box {
  position: relative;
  top:9px;
  left: 17px;
  right: 17px;
  bottom: 11px;
  /* width: 1875px; */
  width: 1950px;
  height: 625px;
  background-color:#b0b0b0;
  }
  .Box .photo{
  top: 127px;
  transition: 0.5s;
  }

.Box .photo2 {
transform: rotate(-30deg);
transition: .5s;
}
/* .Box img,p {
transition: 3s;

} */
/复用的box盒子宽高/
.photo {
width: 208px;
height: 318px;
background-color: white;
}

p {
position: absolute;
top: 75%;
left: 45%;
font-size: 24px;
}
/修改前的img 大小/
/* 208 318 盒子的大小 /
.Box .photo1 img {
position: absolute;
/ width: 192px;
height: 210px; /
width: 92.3%;
height: 66%;
left: 3.85%;
/ right: 3.85%; /
}
.photo1 {
/ margin:27px; */
position: absolute;
width: 212px;
height: 319px;
left:92px;
right: 31px;
transform:rotate(30deg);
}
/触碰之后的位置/
.Box .photo1:hover {
width: 300px;
height: 451px;
transform:rotate(0deg);
left:31px;
top: 88px;
}

.photo2 {
position: absolute;
width: 256px;
height: 370px;
background-color: white;
left: 448px;
top: 79px;
transform: rotate(-30px);
/* top:0px; */
}

.Box .photo2 p {
position: absolute;
top: 75%;
left: 34%;
}
.Box .photo2 img {
position: absolute;
width: 92.3%;
height: 66%;
left: 12px;

}
.Box .photo2:hover {
width: 300px;
height: 451px;
top: 88px;

transform: rotate(0deg);

}
/相对于 第一个盒子中间间距 31px/
/* .Box .photo2 {
left: 31px;
} */
.photo3 {
width: 225px;
height: 339px;
position: absolute;
/W p2+ 30 left 758+81/
left:846px;
top:0px;
transform: rotate(25deg);
}
.Box .photo2 img {
position: absolute;
width: 92.3%;
height: 66%;
left: 12px;
}
.Box .photo3 img {
position: absolute;
width: 92.3%;
height: 66%;
left: 12px;
}
.Box .photo3 p {
position: absolute;
top: 75%;
left: 34%;
}
.Box .photo3:hover {
width: 300px;
height: 451px;
top: 88px;
transform: rotate(0deg);
}

.Box .photo4 img {
position: absolute;
width: 92.3%;
height: 66%;
left: 8px;
}
.photo4 {
/距离第5个放大相差63/
position: absolute;
top: 0px;
right: 500px;
transform:rotate(-25deg);
}
.Box .photo4 p {
position: absolute;
top: 75%;
left: 34%;
}
.Box .photo4:hover {
width: 300px;
height: 451px;
top: 88px;
transform:rotate(0deg);
}

.Box .photo4 p {
position: absolute;
top: 75%;
left: 34%;
}
.Box .photo5 img {
position: absolute;
width: 92.3%;
height: 66%;
left: 8px;
}

.photo5 {
position: absolute;
width: 271px;
height: 406px;
top: 0px;
right: 107px;
transform: rotate(25deg);
}
.Box .photo5:hover {
width: 300px;
height: 451px;
top: 88px;
transform: rotate(0deg);
}

图片：