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实现卡片效果-酒窝博客](https://img.9wor.com/pic/2022/03/01/kq938w.png)
附
件
下
载
文件名称:CSS卡片示例
更新日期:2022-6-19
文件大小:936.39KB
提示:本站默认解压密码(WWW.9WOR.COM),转载请注明出处!若资源侵犯了你的版权,请邮件联系,我们会在24小时内删除,如果发现资源失效,请回复或联系站长进行处理!!!
感谢您的来访,获取更多精彩文章请收藏本站。

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