纯CSS实现卡片效果

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>酒窝|个人首页 - 时光荏苒,青春不在!</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="card">
        <div class="info">
            <img src="img/touxiang.jpg">
            <span>粥长</span>
            <span>一个努力学习前端的小白</span>
        </div>
    </div>
</body>
</html>

CSS代码

body{
height: 100vh;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-direction: column; /*弹性盒元素的方向,垂直一个一个*/
justify-content: center; /*居中排列*/
background: url("../img/bg2.jpeg");
background-size: cover;
background-position: center; /*背景图像的起始位置居中*/
}
.card{
width: 800px;
height: 600px;
background: rgb(255, 255, 255, 0.2);
border-radius: 20px; /*边角导角*/
backdrop-filter: blur(6px); /*背景模糊度*/
box-shadow: 0 25px 25px rgba(0, 0, 0, 0.4); /*卡片阴影*/
border-top: 1px solid rgb(255, 255, 255, 0.8);
transition: 0.5s;
}
.card:hover{
transform: scale(1.1); /*卡片缩放*/
}
.card .info{
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.card .info img{
height: 100px;
width: 100px;
border-radius: 25px;
border: 8px solid rgb(255, 255, 255, 0.2);
margin-right: 40px;
}
.card .info .txt{
display: flex;
flex-direction: column;
line-height: 2;
}
.card .info .txt span:nth-child(1){
font-size: 24px;
font-weight: bold;
}

示例图片

图片[1]-纯CSS实现卡片效果-酒窝博客





文件名称:CSS卡片示例

更新日期:2022-6-19

文件大小:936.39KB

提示:本站默认解压密码(WWW.9WOR.COM),转载请注明出处!若资源侵犯了你的版权,请邮件联系,我们会在24小时内删除,如果发现资源失效,请回复或联系站长进行处理!!!

点击下载


感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容