【样式】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);}}
