UI Components
全息卡片
具有彩虹色全息箔光泽、随光标移动而变化的卡片。
作者:mcpskills
框架
reacttailwind
UI 库
card
难度advanced
英文提示词
Create a premium holographic card component. The card is a rounded-2xl rectangle with a very dark or black background. On top, add an iridescent gradient overlay that shifts through cyan, magenta, gold, and violet as the user moves the cursor across the card. Use a CSS conic-gradient or linear-gradient updated via mouse position, combined with a subtle noise texture at low opacity. The card content includes a minimal title, a short subtitle, and a small geometric SVG mark. Add a 3D tilt effect so the card rotates slightly toward the cursor. Use no emojis, only SVG icons. The effect should feel futuristic, collectible, and luxurious.
中文提示词
创建一个高级全息卡片组件。卡片是 rounded-2xl 矩形,背景为极深或黑色。上方添加彩虹色渐变叠加层,当用户移动光标穿过卡片时,颜色在青色、品红、金色和紫罗兰之间变化。使用 CSS conic-gradient 或 linear-gradient 根据鼠标位置更新,并叠加低透明度的细微噪点纹理。卡片内容包括最小化标题、简短副标题和一个小几何 SVG 标记。添加 3D 倾斜效果,使卡片轻微朝向光标旋转。不使用 emoji,仅使用 SVG 图标。效果应具有未来感、收藏感和奢华感。

Holographic card with iridescent foil sheen and 3D tilt interaction.