创建盒子,链接图片,写入文本
<body>
<div class="container">
<div class="photowall">
<div class="photo1">
<div class="photoview">
<img src="./images/1.gif" alt="">
<p>四季变换</p>
<p>始终是你</p>
</div>
</div>
<div class="photo2">
<div class="photoview">
<img src="./images/2.gif" alt="">
<p>终有一天</p>
<p>游遍桂林山水</p>
</div>
</div>
<div class="photo3">
<div class="photoview">
<img src="./images/3.gif" alt="">
<p>看壮阔的瀑布</p>
<p>纪念逝去的光阴</p>
</div>
</div>
<div class="photo4">
<div class="photoview">
<img src="./images/4.gif" alt="">
<p>你我相互依偎</p>
<p>倒映在水中</p>
</div>
</div>
</div>
</div>
</body>
写入css样式
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-image: url(./images/bjt.jpeg);
background-size: cover;
overflow: hidden;
}
.container{
width: 100%;
height: 100%;
}
.photowall{
width: 100%;
height: 100%;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* outline: 1px dashed red; */
}
.photoview{
padding: 10px 10px 20px 10px;
margin: 5px;
background-color: #f2eada;
text-align: center;
font-size: 20px;
box-shadow: 0.2em 0.2em 0.8em #130c0e;
position: relative;
}
.photoview img{
width: 300px;
height: 220px;
}
.photoview p{
margin-top: 5px;
}
.photo1{
transform-origin: right bottom;
transform: rotate(10deg);
}
.photo2{
transform-origin: right bottom;
transform: rotate(-20deg);
}
.photo3{
transform-origin: left top;
transform: rotate(20deg);
}
.photo4{
transform-origin: left bottom;
transform: rotate(-20deg);
}
</style>
最终效果预览
图片按照自己喜欢的去应用即可