CSS实现服务卡片
效果展示
CSS 知识点
页面整体布局
< 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>
实现整体布局和容器整体样式
.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;
}
实现卡片图标和整体布局
.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;
}
实现卡片内容部分样式
.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;
}
实现卡片按钮效果
.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;
}
设置卡片悬停效果
.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) ;
}
完整代码下载
完整代码下载