Display

网格图案叠加

深色背景上向远处淡出的微妙透视网格叠加。

作者：mcpSkills

框架

nextjs

UI 库

shadcntailwind

难度intermediate

英文提示词

Create a dark section with a perspective grid overlay. The grid lines should converge toward a vanishing point near the bottom center, creating a floor-like perspective. Fade the grid to transparent at the top and sides. Use CSS gradients or SVG for the grid. Use Tailwind CSS. Center a headline and CTA above the grid.

中文提示词

创建一个深色区域，带有透视网格叠加。网格线应向底部中心附近的消失点汇聚，形成类似地面的透视。顶部和两侧网格淡出至透明。使用 CSS 渐变或 SVG 绘制网格。使用 Tailwind CSS。在网格上方居中放置标题和 CTA。

## Overview 营造深度和空间感的科技风背景。常见于开发工具、赛博朋克和 SaaS 落地页。 ## Features - 透视网格线 - 消失点 - 顶部/两侧淡出 - 地面般深度 - CSS 渐变或 SVG - 居中内容 ## Usage 适用于 hero 区域、CTA 区域或具有科技美学的产品演示。 ## Customization 修改 prompt 以： - 动画网格线向观看者移动 - 网格交叉点添加发光 - 网格颜色改为品牌强调色 - 添加地平线发光