BACKGROUND & DECOR
光束射线Light Rays / Sunburst
从顶部一点放射出明暗相间的光束，复古而隆重的仪式感。
效果预览
从顶部一点放射的光束
适合用在哪
促销活动页、会员升级页、复古风格品牌。
容易踩的坑
- 光束白光透明度超过 15%，会形成刺眼的条纹并干扰标题阅读。
- 光束摆动幅度大于 ±5°，会产生旋转眩晕感，应同时尊重 reduced-motion。
- 放射原点不在画面外上方，光束交汇点暴露成生硬的尖角。
设计提示词 · Prompt
光束射线（Light Rays）：超大 conic-gradient 从顶部一点放射——conic-gradient(from 178deg at 50% -8%, 透明 0deg, 白光 4deg, 透明 9deg, …) 手工排 4-6 条明暗交替的光束（白光用 6-10% 透明度），再叠一团暖色光晕在放射原点。整体 opacity 控制在若有若无。光束可以加缓慢旋转（±2° 摆动）或随鼠标微移。金色暖光 + 深色底 = 高级庆典感；冷白光 + 深蓝底 = 神秘科技感。
Light Rays: An oversized conic-gradient radiating from one point at the top — conic-gradient(from 178deg at 50% -8%, transparent 0deg, white light 4deg, transparent 9deg, …), hand-arranging 4-6 alternating light and dark beams (white light at 6-10% opacity), then layer a warm glow at the radiating origin. Keep the overall opacity barely perceptible. The beams can slowly rotate (±2° sway) or shift slightly with the mouse. Golden warm light + dark background = premium celebratory feel; cool white light + deep blue background = mysterious tech feel.
常见搭配
同一页面里经常和「光束射线」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-raysbg"> <div class="d-raysbg__rays"></div> <div class="d-raysbg__sun"></div> <b>从顶部一点放射的光束</b> </div>