返回

Fireworks

请注意,这里绝大多数组件项目均部署于 Vercel,虽然我通过 Cloudflare 实现了全球 CDN 加速,但在国内网络环境下访问可能仍存在不稳定的情况。若组件未能正常加载,建议使用 VPN 后重试访问

3D Glass Button

这个交互组件是我在探索界面视觉表现与 CSS 表达力过程中完成的一个练习项目。

项目基于 Next.js 与 Tailwind CSS 实现,并部署在 Vercel 上。

你可以点击并拖动旋钮,它会像现实中的旋转按钮一样,在不同的刻度点上停止并反馈当前状态,模拟真实的旋转交互体验。

How do I use it?

这个 3D 玻璃按钮完全使用 HTML+TailwindCSS 构建。它通过多层图层叠加实现高光与阴影效果。该作品改编自 Petr Knoll 的原始设计,并作为灵感来源。

你可以通过 Github 查看源代码,或者在 Vercel 中进行组件预览与体验。自由拆解组件,深入查看其图层结构与 transform 属性,了解其实现方式。

Frequently asked questions

这个组件是如何实现的?

这是一个基于代码实现的可交互展示型组件,通常通过 Cursor 或 VS Code 开发完成。同时,我也会参考并改进一些优秀的开源组件,对其进行二次创作和优化迭代。

我如何把它应用到自己的项目中?

你可以在前端项目中,或使用 Framer、Webflow 等低代码工具灵活调用这些组件。我通常使用 TailwindCSS 的类名(className)来编写样式,因此你可以轻松修改和自定义它们。

我是否需要了解代码呢?

你需要掌握基础的前端知识,例如 HTML、CSS、JavaScript 和 Tailwind CSS,并具备使用 Next.js 技术栈进行项目初始化的能力。同时,了解如何使用 Git 将项目克隆至本地开发环境。

我在哪里可以找到组件的源码?

如果该组件尚未公开发布,你可以通过邮箱(xue7106211@gmail.com)联系我,我会将它发送给你!