CSS实现服务卡片
效果展示
CSS 知识点
页面整体布局
html
复制代码
<div class="container">
<div class="card">
<div class="box">
<div class="icon">
<ion-icon name="color-palette-outline"></ion-icon>
</div>
<div class="content">
<h2>Design</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Consectetur in maiores dolor ducimus at quod nisi reiciendis
voluptate, quasi dolorum repudiandae et obcaecati suscipit
corrupti molestias sequi voluptas adipisci dolorem.
</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
实现整体布局和容器整体样式
css
复制代码
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 60px;
padding: 80px 40px;
}
.container .card {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
padding: 40px 20px;
border-radius: 30px;
cursor: pointer;
background: rgba(0, 0, 0, 0.2);
transition: 0.5s;
}
实现卡片图标和整体布局
css
复制代码
.container .card .box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.container .card .box .icon {
position: relative;
width: 80px;
height: 80px;
background: rgba(0, 0, 0, 0.25);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
color: #fff7;
transition: 0.5s;
}
实现卡片内容部分样式
css
复制代码
.container .card .content {
margin-top: 20px;
}
.container .card .content h2 {
color: #fff7;
font: 1.25em;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.5s;
}
.container .card .content p {
margin-top: 10px;
color: #fff7;
font-weight: 400;
letter-spacing: 1px;
transition: 0.5s;
}
实现卡片按钮效果
css
复制代码
.container .card .content a {
display: inline-block;
background: rgba(0, 0, 0, 0.25);
padding: 10px 20px;
margin-top: 20px;
font-weight: 500;
letter-spacing: 1px;
color: #fff7;
border-radius: 30px;
text-decoration: none;
}
设置卡片悬停效果
css
复制代码
.container .card:hover {
background: #1f83f2;
box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),
10px 10px 70px rgba(0, 0, 0, 0.25),
inset 5px 5px 20px rgba(255, 255, 255, 0.25),
inset -5px -5px 15px rgba(0, 0, 0, 0.75);
transform: translateY(-20px);
}
.container .card:hover .box .icon {
background: #2f363e;
color: #fff;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25),
inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}
.container .card:hover .content h2,
.container .card:hover .content p {
color: #fff;
}
.container .card:hover .content a {
background: #2f363e;
color: #fff;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25),
inset -3px -3px 5px rgba(0, 0, 0, 0.5);
}
完整代码下载
完整代码下载