← 返回提示词
Landing

台灯 Hero 区域

深色 hero 区域,中央台灯光锥照亮标题和 CTA。

作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a dark hero section with a lamp/light-source effect. A narrow cone of light should descend from the top center, widening as it reaches the headline, with soft edges and a radial gradient fade. The headline and subheadline sit inside the illuminated area in off-white text, while the surrounding background stays near-black. Add a small glowing CTA pill below the text. Use CSS gradients, masks, and opacity layers. Use Tailwind CSS. No images, no illustrations—only light, shadow, and type.
中文提示词
创建一个深色 hero 区域,带有灯具/光源效果。一道狭窄的光锥从顶部中心向下延伸,到达标题时逐渐变宽,边缘柔和并径向渐变淡出。标题和副标题位于照亮区域内,使用米白色文字,周围背景保持近黑色。文字下方添加一个发光 CTA 胶囊按钮。使用 CSS 渐变、遮罩和透明度层。使用 Tailwind CSS。无图片、无插图——只有光、影和字体。
台灯 Hero 区域 screenshot 1
## Overview 使用单一光锥吸引注意力的戏剧感 hero 区域。灵感来自 Aceternity UI 的 Lamp Effect 和深色高端落地页。 ## Features - 从顶部中心向下延伸的光锥 - 柔和径向渐变边缘 - 被照亮的标题和副标题 - 近黑色周围背景 - 发光 CTA 胶囊 - 纯 CSS 光影效果 ## Usage 适用于产品发布、开发工具或希望实现电影感揭示的创意作品集。 ## Customization 修改 prompt 以: - 加载时动画显示光锥 - 在光束内添加漂浮尘埃粒子 - 将光锥颜色改为琥珀色或青色 - 添加滚动驱动的变暗效果