【每日一练】167—CSS实现一款实用的响应式卡片效果

每日一练10个月前发布 admin
1,522 0

今天这个卡片效果,我个人觉得还是非常实用的,具体效果如下:

【每日一练】167—CSS实现一款实用的响应式卡片效果

HTML代码:

<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】167—CSS实现响应式卡片悬停效果</title>
<link rel=”stylesheet” href=”style.css”>

</head>
<body>
<body>
<div class = container>
<div class = card>
<div class = image>
<img href = “http://www.webqdkf.com” src =01.jpg>
</div>
<div class = content>
<h3>一个人最好的状态</h3>
<p>有句话说:“当你独自穿过了暴风雨,你就不是原来的那个人了。”经过生活历练的人,最终都变成了更强大的自己。生活中,我们要学会清空情绪、清零往事、清静内心</p>
</div>
</div>
</div>
</body>

</body>
</html>

CSS代码:

* {
margin : 0;
padding: 0;
box-sizing : border-box;
font-familly : “Poppins”, sans-serif;
}
body {
display : flex;
align-items : center;
justify-content : center;
background-color: #444;
min-height : 800px;
}

.container {
position : relative;
width : 1100px;
display : flex;
align-items : center;
justify-content : center;
flex-warp : warp;
padding : 30px;
}

.container .card {
position: relative;
max-width : 300px;
height : 215px;
background-color : #fff;
margin : 30px 10px;
padding : 20px 15px;

display : flex;
flex-direction : column;
box-shadow : 0 5px 20px rgba(0,0,0,0.5);
transition : 0.3s ease-in-out;
border-radius : 15px;
}
.container .card:hover {
height : 320px;
}

.container .card .image {
position : relative;
width : 260px;
height : 260px;

top : -40%;
left: 8px;
box-shadow : 0 5px 20px rgba(0,0,0,0.2);
z-index : 1;
}

.container .card .image img {
max-width : 100%;
border-radius : 15px;
}

.container .card .content {
position : relative;
top : -140px;
padding : 10px 15px;
color : #111;
text-align : center;

visibility : hidden;
opacity : 0;
transition : 0.3s ease-in-out;

}

.container .card:hover .content {
margin-top : 30px;
visibility : visible;
opacity : 1;
transition-delay: 0.2s;

}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...