用 CSS 打造玻璃态卡片悬停效果，几步就能搞定
文章目录
前言
玻璃态设计（
Glassmorphism）在 UI 设计里一直很受欢迎 —— 半透明的质感、柔和的模糊效果，再加上光影层次，能让界面瞬间有了高级感。今天想跟大家分享一个简单但很出效果的玻璃态卡片案例，不用复杂的JS，纯 CSS就能实现悬停时的动态变化，新手也能快速上手。
效果预览
页面中央有四个卡片，每个卡片都带着玻璃态的磨砂质感，初始状态会有不同角度的倾斜，卡片上有对应的图标（设计、代码、发射、收益相关），底部还有文字标识。当鼠标移到卡片区域时，所有卡片会自动摆正角度，整齐排列，间距也会调整得更均匀，整个过程平滑流畅，视觉上很有张力。
目标与实现思路
核心目标
- 实现卡片的玻璃态视觉效果（半透明、模糊背景、边框质感）
- 添加悬停时的动画效果（角度归位、间距调整）
实现要点
- 用 CSS 的
backdrop-filter和半透明背景模拟玻璃质感- 通过自定义属性
--r控制卡片初始旋转角度- 利用
transition实现悬停时的平滑动画过渡- 用
Flex布局控制卡片的排列方式
HTML结构说明
整体结构很简单：一个
container容器包裹了四个glass卡片。每个卡片通过style="--r:角度值”定义初始旋转角度，data-text属性存储底部显示的文字（比如 “Design”“Code”），内部用 Font Awesome 的图标标签<i>展示对应图标。没有多余嵌套，语义清晰，新手也能快速看懂。
CSS样式详解
这部分是实现效果的核心，挑几个关键属性说说：
1. 玻璃态核心
background: linear-gradient(#fff2, transparent)：用渐变实现轻微的白色半透明背景，避免纯透明显得单薄backdrop-filter: blur(10px)：关键属性！让卡片背后的背景产生模糊，模拟磨砂玻璃效果border: 1px solid rgba(255,255,255,0.1)：浅色细边框增强玻璃的 “边框感”，避免边缘太生硬
2. 初始状态与动画
transform: rotate(calc(var(--r) * 1deg))：通过自定义属性–r计算旋转角度，让每个卡片初始倾斜角度不同transition: 0.5s：给所有属性变化添加 0.5 秒过渡，让动画更顺滑
3. 悬停交互
- 鼠标移到容器时，
container:hover .glass会触发样式变化：transform: rotate(0deg)让卡片归位，margin: 0 20px调整间距，实现整齐排列的效果
4. 细节增强
box-shadow: 0 25px 25px rgba(0,0,0,0.25)：深色阴影增加卡片的悬浮感，让玻璃态不显得 “飘”- 卡片底部的文字通过
::before伪元素实现，用attr(data-text)读取 HTML 中的文字，减少冗余代码
完整源码附录
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 玻璃态卡片悬停效果</title>
<!-- 引入Font Awesome图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha512-DxV+EoADOkOygM4IR9yXP8Sb2qwgidEmeqAEmDKIOfPRQZOWbXCzLC6vjbZyy0vPisbH2SyW27+ddLVCN+OMzQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- 引入自定义样式 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 卡片容器 -->
<div class="container">
<!-- 玻璃态卡片1：设计 -->
<div class="glass" style="--r: -15;" data-text="Design">
<i class="fa-regular fa-pen-to-square"></i>
</div>
<!-- 玻璃态卡片2：代码 -->
<div class="glass" style="--r: 5;" data-text="Code">
<i class="fa-solid fa-code"></i>
</div>
<!-- 玻璃态卡片3：发射 -->
<div class="glass" style="--r: 25;" data-text="Launch">
<i class="fa-solid fa-rocket"></i>
</div>
<!-- 玻璃态卡片4：收益 -->
<div class="glass" style="--r: -15;" data-text="Earn">
<i class="fa-solid fa-money-check-dollar"></i>
</div>
</div>
</body>
</html>style.css
/* 初始化样式：清除默认内外边距，设置盒模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面主体样式：黑色背景，居中布局 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
/* 占满整个视口高度 */
background: #0f222f;
/* 深色背景，突出玻璃态效果 */
}
/* 卡片容器：控制卡片整体排列 */
.container {
position: relative;
display: flex;
/* 让卡片横向排列 */
justify-content: center;
align-items: center;
}
/* 玻璃态卡片基础样式 */
.container .glass {
position: relative;
width: 200px;
height: 240px;
background: linear-gradient(#fff2, transparent);
/* 半透明渐变背景 */
border: 1px solid rgba(255, 255, 255, 0.1);
/* 浅色边框增强玻璃质感 */
box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
/* 深色阴影增加立体感 */
backdrop-filter: blur(10px);
/* 关键：背景模糊，实现磨砂玻璃效果 */
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
/* 所有变化添加过渡动画 */
border-radius: 10px;
/* 圆角处理 */
margin: 0 -45px;
/* 初始重叠一点，增强错落感 */
transform: rotate(calc(var(--r) * 1deg));
/* 用自定义属性控制初始旋转角度 */
}
/* 鼠标悬停容器时的卡片样式 */
.container:hover .glass {
transform: rotate(0deg);
/* 旋转归位 */
margin: 0 20px;
/* 调整间距，整齐排列 */
}
/* 卡片底部文字：通过伪元素实现 */
.container .glass::before {
content: attr(data-text);
/* 读取data-text属性的值作为文字 */
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.05);
/* 轻微底色，突出文字 */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
/* 白色文字，与深色背景对比 */
}
/* 卡片图标样式 */
.container .glass i {
font-size: 4em;
/* 图标放大 */
color: #fff;
/* 白色图标，保持风格统一 */
}结语 & 行动建议
这个案例其实不难，核心就是把玻璃态的几个关键 CSS 属性用好，再配合简单的过渡动画。你完全可以动手改改看：比如换个背景色（试试深蓝色或紫色？）、调整卡片尺寸、换一套图标，甚至改改悬停时的动画时长，看看会有什么新效果。