HTML5+CSS3小实例：抽屉式相册
技术栈：HTML+CSS
效果：
源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>抽屉式相册</title>
<link rel="stylesheet" href="../css/40.css">
</head>
<body>
<div class="box">
<div class="img-box">
<img src="../images/op/1.jpg" alt="" >
</div>
<div class="img-box">
<img src="../images/op/2.jpg" alt="" >
</div>
<div class="img-box">
<img src="../images/op/3.jpg" alt="" >
</div>
<div class="img-box">
<img src="../images/op/4.jpg" alt="" >
</div>
<div class="img-box">
<img src="../images/op/5.jpg" alt="" >
</div>
</div>
</body>
</html>
*{
/* 初始化 取消内外边距 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.box{
width: 1200px;
height: 550px;
/* 弹性布局 水平排列 */
display: flex;
flex-direction: row;
/* 设置元素的倒影效果，below是倒影效果在元素下方，15px是元素和倒影的距离，后面的属性是设置倒影渐变 */
-webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%,rgba(255,255,255,0.3));
}
.img-box{
width: 100px;
height: 550px;
overflow: hidden;
/* 动画过渡 */
transition: 0.3s;
}
/* 默认最后一张展开 */
.img-box:nth-child(5){
width: 800px;
}
.img-box img{
width: 100%;
height: 100%;
/* 由于这里我的图片都是竖图，而容器是横向的，所以对图片做了以下处理，这里大家根据自己的图片进行调节即可 */
/* 对图片进行剪切，保留原始比例 */
object-fit: cover;
/* object-position 属性一般与 object-fit 一起使用，用来设置元素的位置。 */
object-position: 50% 20%;
}
/* 鼠标移入，图片展开 */
.img-box:hover{
width: 800px;
}
.img-box:hover ~ .img-box:nth-child(5){
width: 100px;
}
