纯CSS实现卡片效果

Wobiny • • CSS教程, 技术资讯 • 182 阅读

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实现卡片效果

本章链接：https://www.9wor.com/34.html

本站名称：酒窝博客

本站地址：www.9wor.com

本站部分内容来源于网络，仅供大家参考学习，若侵犯到了您的合法权益，请点击此处联系站长处理。

本站资源均存储至云盘，若有失效请联系处理，建议成为注册用户使用我们的CDN直连下载。

为了本站的稳定发展，希望贵站若搬运本站资源，请注明一下原站地址，真的谢谢你们了！

THE END
分享
二维码
海报
纯CSS实现卡片效果
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>酒窝|个人首页 - 时光荏苒，青春不在！</ti……
< <上一篇
下一篇>>