CSS 实现电影信息卡片

CSS 实现电影信息卡片

效果展示

CSS 知识点

• CSS 综合知识运用

页面整体布局

<div class="card"><div class="poster"><img src="./poster.jpg" /></div><div class="details"><img src="./avtarlogo.png" class="logo" /><h3>Directed by James Cameron</h3><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i><span>4/5</span></div><div class="tags"><span>Sci-fi</span><span>Action</span></div><div class="info"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. A magnamquisquam consequuntur mollitia blanditiis voluptate.</p></div><div class="cast"><h4>Cast</h4><ul><li><img src="./cast1.jpg" /></li><li><img src="./cast2.jpg" /></li><li><img src="./cast3.jpg" /></li><li><img src="./cast4.jpg" /></li><li><img src="./cast5.jpg" /></li></ul></div></div>
</div>

实现电影信息卡片整体布局

.card {position: relative;width: 320px;height: 450px;border-radius: 20px;overflow: hidden;box-shadow: 0 15px 35px rgba(0,0,0,.25);
}.card .poster {position: relative;overflow: hidden;
}.card .poster img {width: 100%;transition: .5s;
}

添加电影卡片鼠标悬停效果

.card .poster::before {content: '';position: absolute;bottom: -180px;width: 100%;height: 100%;background: linear-gradient(0deg, #1064a6 50%, transparent);transition: .5s;z-index: 1;
}.card:hover .poster::before {bottom: 0px;transition: .5s;
}.card:hover .poster img {transform: translateY(-50px);filter: blur(5px);
}

实现电影卡片Logo样式

.card .details {position: absolute;bottom: -175px;left: 0;padding: 20px;width: 100%;z-index: 2;transition: .5s;
}.card:hover .details {bottom: 0px;
}.card .details .logo {max-width: 180px;
}

编写电影卡片标题和评分样式

.card .details h3 {font-size: 0.8em;color: #FFF;
}.card .details .rating {position: relative;padding: 5px 0;
}.card .details .rating .fa-star {color: #f7f406;font-size: 1em;
}.card .details .rating span {color: #FFF;margin-left: 5px;
}

编写电影卡标签样式

.card .details .tags {position: relative;margin-top: 5px;
}.card .details .tags span {padding: 2px 5px;color: #FFF;background: #03a8f5;border-radius: 4px;
}.card .details .tags span:nth-child(2) {background: #ff5722;
}

编写电影卡片信息样式

.card .details .info {color: #FFF;margin-top: 20px;
}

编写电影卡演员列表图片样式

.card .details .cast {position: relative;
}.card .details .cast h4 {color: #FFF;margin-top: 10px;
}.card .details .cast ul {position: relative;display: flex;margin-top: 10px;gap: 10px;
}.card .details .cast ul li {list-style: none;width: 35px;height: 35px;overflow: hidden;border-radius: 50%;border: 2px solid #fff;
}.card .details .cast ul li img {width: 100%;
} 

完整代码下载

完整代码下载