← 返回提示词
Display

玻璃拟态功能卡片

带有渐变边框发光、内部高光和分层透明深度的优质磨砂玻璃卡片。

作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a single premium glassmorphism feature card. The card should float over a dark, saturated gradient background. Use backdrop-filter blur, a thin semi-transparent white border, and an inner radial gradient highlight near the top-left corner to simulate glass reflection. Add a slowly rotating conic-gradient glow behind the card on hover. Inside, place a sharp icon, a bold headline in white, and a short description in white/60. Use a monospaced tag/label above the headline. Typography should feel precise and high-end. Ensure the glow effect is pure CSS and does not use images. Use Tailwind CSS.
中文提示词
创建一个高端玻璃拟态功能卡片。卡片应悬浮在深色饱和渐变背景之上。使用 backdrop-filter 模糊、半透明白色细边框,以及左上角附近的内径向渐变高光来模拟玻璃反射。悬停时在卡片背后添加缓慢旋转的锥形渐变光晕。内部放置锐利图标、白色粗体标题和白色/60 透明度的简短描述。标题上方使用等宽标签/眉标。排版应显得精准而高级。确保光晕效果为纯 CSS,不使用图片。使用 Tailwind CSS。
玻璃拟态功能卡片 screenshot 1
## Overview 展示分层深度、光线反射和微妙动效的高端玻璃卡片。适合用于旗舰功能亮点。 ## Features - backdrop-filter 磨砂玻璃 - 半透明边框与内部高光 - 悬停时旋转的锥形渐变边框光晕 - 深色饱和渐变背景 - 等宽标签 + 白色粗体标题 - 纯 CSS,无图片 ## Usage 放置在深色区域以突出单个旗舰功能、集成或推荐语。 ## Customization 修改 prompt 以: - 在后面添加更小的卡片制造层叠深度 - 将光晕颜色改为品牌强调色 - 添加鼠标跟随的轻微倾斜效果 - 在卡片内加入小型数据指标