【样式】Html 卡片样式
.card {
width: calc(40% - 10px);
height: 160px;
display: inline-block; /* 或者 flex / block 根据布局需求 */
position: relative;
margin: 10px; /* 添加边距以确保卡片之间有间距 */
padding: 15px; /* 内边距为内容提供空间 */
background-color: rgba(255, 255, 255, 0.3); /* 卡片背景色 */
border-radius: 6px; /* 圆角效果 */
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* 阴影效果，可以根据需要调整参数 */
transition: all 0.3s ease; /* 添加过渡效果，如：hover时的动画 */
/* 高斯模糊 */
backdrop-filter: blur(2px); /* 应用模糊效果到背景（包括其下面的内容） */
/* 可选，添加内边框或外边框 */
border: 1px solid #ddd;
/* 其他自定义样式，例如最大宽度、对齐方式等 */
max-width: 300px;
text-align: center;
}
/*
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(''); /* 设置背景图片 */
background-size: cover;
z-index: -1;
filter: blur(10px); /* 对背景图片应用模糊效果，仅限于这个伪元素 */
}
*/
/* 悬停状态下的阴影增强效果 */
.card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}
<div class="card">
<h3>卡片标题</h3>
<p>这里是卡片的内容...</p>
</div>进阶
增加卡片旋转的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.glass-card {
/* 其他样式不变，保持磨砂玻璃效果 */
/* ... */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
0 5px 15px rgba(0, 0, 0, 0.1) rotate(0deg); /* 添加初始阴影样式，并包含旋转角度为0度 */
animation: rotate-shadow 3s linear infinite; /* 应用名为rotate-shadow的动画，持续3秒，线性变化，无限循环 */
}
@keyframes rotate-shadow {
to { /* 在动画结束时（100%） */
transform: rotate(360deg); /* 让阴影围绕卡片旋转一周 */
}
}
</style>
</head>
<body>
<div class="glass-card">
<h3>磨砂玻璃卡片标题</h3>
<p>此卡片具有磨砂玻璃效果和旋转阴影动画。</p>
</div>
</body>
</html>呼吸灯效果
.card {
width: calc(40% - 10px);
height: 160px;
display: inline-block; /* 或者 flex / block 根据布局需求 */
position: relative;
margin: 10px; /* 添加边距以确保卡片之间有间距 */
padding: 15px; /* 内边距为内容提供空间 */
background-color: rgba(255, 255, 255, 0.3); /* 卡片背景色 */
border-radius: 6px; /* 圆角效果 */
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* 阴影效果，可以根据需要调整参数 */
transition: all 0.3s ease; /* 添加过渡效果，如：hover时的动画 */
/* 高斯模糊 */
backdrop-filter: blur(2px); /* 应用模糊效果到背景（包括其下面的内容） */
/* 可选，添加内边框或外边框 */
border: 1px solid #ddd;
/* 其他自定义样式，例如最大宽度、对齐方式等 */
max-width: 300px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
0 5px 15px rgba(0, 0, 0, 0.2) rotate(0deg); /* 添加初始阴影样式，并包含旋转角度为0度 */
/* 旋转效果 */
/*animation: rotate-shadow 80s linear infinite; */ /* 应用名为rotate-shadow的动画，持续3秒，线性变化，无限循环 */
/* 呼吸灯效果 */
animation: breathe 3s ease-in-out infinite alternate;
}
@keyframes rotate-shadow {
to { /* 在动画结束时（100%） */
transform: rotate(360deg); /* 让阴影围绕卡片旋转一周 */
}
}
@keyframes breathe {
0% {
transform: scale(0.97);
}
100% {
transform: scale(1.01);
}
}