纯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;
}

示例图片

附
件
下
载

文件名称：CSS卡片示例

更新日期：2022-6-19

文件大小：936.39KB

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

点击下载

温馨提示：本文最后更新于2022-07-29 16:11:28，某些文章具有时效性，若有错误或已失效，请在下方留言或联系小酒窝。

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

本站网络名称： 酒窝博客

本站永久网址： https://www.9wor.com/

网站侵权说明：本站采用 CC BY-NC-SA 4.0 国际许可协议进行许可，转载或引用本站文章应遵循相同协议。
1 本站为转载分享站点，不提供任何上传下载服务，所有内容均来自互联网第三方分享站点所提供的公开引用内容，不需要任何付费即可公开阅读。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 如果有侵犯版权的资源请尽快联系站长，我们会在24h内删除有争议的资源。
站长邮箱：admin@9wor.com

THE END

纯CSS实现卡片效果

HTML代码

CSS代码

示例图片

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

网站信息统计