欢迎来到液态玻璃博客

你好，世界！👋

欢迎来到 液态玻璃博客 —— 一个融合了现代设计美学与前沿前端技术的个人博客。

为什么叫「液态玻璃」？

这个名字来源于博客的核心设计理念：

• 毛玻璃效果：所有组件都采用 backdrop-filter: blur() 实现的毛玻璃质感
• 液态动效：丝滑流畅的过渡动画和交互反馈
• 光影层次：通过透明度和渐变营造出丰富的视觉层次

技术栈

这个博客使用了以下技术构建：

技术	用途
Astro 6	静态站点生成
Tailwind CSS v4	样式系统
React 19	交互组件
Keystatic	CMS 内容管理
GSAP	动效引擎

代码示例

// 玻璃卡片组件的 CSS 核心
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

接下来的计划

1. 完善所有页面的动效设计
2. 添加音乐播放器
3. 部署到 Cloudflare Pages
4. 持续迭代优化

博客的每一次滚动、每一次点击，都应该是一次愉悦的体验。