MOTION EFFECT
灯罩打光Lamp Effect
顶部一根发光的横条，向下打出锥形光晕，像天花板射灯打亮下方的标题。Aceternity UI 的 Lamp 组件，常用作区块分隔头。
效果预览
Lamp Effect · 灯罩打光
适合用在哪
深色官网的区块标题、功能对比区的引子、章节分隔。
容易踩的坑
- 光幕叠加 blur 后与标题重叠，白字在亮区对比度不足难以辨认。
- 固定 172px 横条在 1440px 宽屏上显得过小，失去射灯的气势。
- 一页多个区块都用灯罩做头部，章节失去主次反而显得重复。
设计提示词 · Prompt
灯罩打光（Lamp Effect）：深近黑底。顶部中轴放一根宽 172px 高 2px 的横条，背景是 transparent→#c7d2fe→#fff→#c7d2fe→transparent 的横向渐变，加 0 0 18px 5px 浅紫的 box-shadow 做辉光；横条上方叠一个 190×110px 的椭圆径向渐变（底部 50% 处 rgba(99,102,241,.85) 向外透明）作为灯罩光团，filter:blur(6px)；横条下方用 conic-gradient(from 180deg at 50% 0, transparent 42%, rgba(199,210,254,.4) 50%, transparent 58%) 做 150×74px 的锥形光幕并 blur(5px)。标题文字放底部居中，白色 680 字重。
Lamp Effect: deep near-black background. At the top center place a 172px-wide, 2px-tall bar whose background is a horizontal gradient transparent→#c7d2fe→#fff→#c7d2fe→transparent, with a 0 0 18px 5px light-purple box-shadow for glow. Above the bar, stack a 190×110px elliptical radial gradient (rgba(99,102,241,.85) at the bottom 50% fading outward) as the lampshade glow, filter:blur(6px). Below the bar, use conic-gradient(from 180deg at 50% 0, transparent 42%, rgba(199,210,254,.4) 50%, transparent 58%) as a 150×74px cone-shaped light curtain with blur(5px). Place the title text at the bottom center, white, font weight 680.
常见搭配
同一页面里经常和「灯罩打光」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-lamp"> <div class="m-lamp__glow"></div> <div class="m-lamp__cone"></div> <div class="m-lamp__bar"></div> <div class="m-lamp__t">Lamp Effect · 灯罩打光</div> </div>