磨砂玻璃效果

现代UI设计中的流行效果，创造深度感和透明层次

深度层次

通过透明度和模糊效果创建视觉深度，增强界面层次感

现代美学

简洁而现代的视觉效果，适用于各种设计风格

响应式设计

完美适配各种屏幕尺寸和设备类型

使用示例

以下是如何在您的项目中实现磨砂玻璃效果的代码示例

/* 基础磨砂玻璃效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

/* 带边框光效的磨砂玻璃 */
.glass-with-border {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(108, 130, 255, 0.2);
}

/* 彩色磨砂玻璃 */
.colored-glass {
  background: linear-gradient(
    135deg,
    rgba(252, 92, 125, 0.1),
    rgba(106, 130, 251, 0.1)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
}

/* 磨砂玻璃卡片 */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  padding: 25px;
  transition: all 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* 磨砂玻璃按钮 */
.glass-button {
  background: rgba(108, 130, 255, 0.2);
  color: #6a82fb;
  padding: 12px 25px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-button:hover {
  background: rgba(108, 130, 255, 0.3);
  color: #ffffff;
}

步骤1：添加基础样式

在CSS中定义磨砂玻璃效果的基本样式，包括背景透明度和模糊效果

步骤2：应用边框和阴影

添加微妙的边框和阴影增强玻璃效果的立体感

步骤3：添加交互效果

为磨砂玻璃元素添加悬停动画和状态变化