一、效果预览
二、HTML
<div class="bookshelf" style="max-width: 900px;">
<div class="book-item">
<div class="book-cover">
<span class="book-state">
完结
</span>
<img class="book-img" src="https://bookcover.yuewen.com/qdbimg/349573/1021708634/150.webp" />
</div>
<div class="book-name">
柯学验尸官
</div>
<div class="book-describe">
未读过
</div>
</div>
<div class="book-item">
<div class="book-cover">
<span class="book-state book-updating">
更新
</span>
<img class="book-img" src="https://bookcover.yuewen.com/qdbimg/349573/1027339371/150.webp" />
</div>
<div class="book-name">
深空彼岸
</div>
<div class="book-describe">
0%
</div>
</div>
</div>
三、CSS
<style>
.bookshelf {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
align-items: start;
justify-items: center;
grid-gap: 18px 9px;
margin: 18px auto;
width: 100%;
height: 100%;
user-select: none;
}
.book-item {
width: 99px;
}
.book-cover {
position: relative;
width: 99px;
height: 132px;
box-shadow: var(--el-box-shadow-light);
transform: scale(.9) perspective(80px) rotateY(-8deg) translateX(-8px);
transition: transform .4s ease-out;
}
.book-cover:hover {
transform: scale(1);
}
.book-cover::before {
box-sizing: border-box;
content: "";
z-index: 2;
position: absolute;
top: 0;
left: 5px;
display: inline-block;
border-left: 2px solid #0005;
border-radius: 2px 0 0 2px;
height: 100%;
}
.book-cover:after {
box-sizing: border-box;
content: "";
z-index: 0;
position: absolute;
top: 3%;
right: -6px;
display: inline-block;
border: 1px solid #DEDEDE;
border-radius: 9px;
width: 10px;
height: 93%;
background-color: #ECEBEB;
}
.book-state {
opacity: .9;
z-index: 2;
position: absolute;
top: 5px;
right: 3px;
border-radius: 3px;
padding: 2px 5px;
color: #F4F3F3;
font-size: .7em;
background-color: #575959;
}
.book-state.book-updating {
color: #FFFBED;
background-color: #FF6E15;
}
.book-img {
position: absolute;
z-index: 1;
border-left: 2px solid #0008;
border-radius: 6px;
width: 100%;
height: 100%;
object-fit: cover;
}
.book-name {
opacity: .8;
display: -webkit-box;
margin: 9px 0 5px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.book-describe {
opacity: .5;
font-size: .75em;
}
</style>
【如果觉得本文不错 “点赞、收藏、关注”,是对作者最大的鼓励。】