CSS 实现电影信息卡片
效果展示
CSS 知识点
页面整体布局
html
复制代码
<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 magnam
quisquam 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>
实现电影信息卡片整体布局
css
复制代码
.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;
}
添加电影卡片鼠标悬停效果
css
复制代码
.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样式
css
复制代码
.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;
}
编写电影卡片标题和评分样式
css
复制代码
.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;
}
编写电影卡标签样式
css
复制代码
.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;
}
编写电影卡片信息样式
css
复制代码
.card .details .info {
color: #FFF;
margin-top: 20px;
}
编写电影卡演员列表图片样式
css
复制代码
.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%;
}
完整代码下载
完整代码下载