Display
背景光束区域
深色区域,对角动画光束在内容后方交叉穿过。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a dark section with animated diagonal light beams crossing behind centered content. Use several thin, slightly blurred lines at varying angles and opacities, animating them to slowly drift or pulse. The beams should be subtle—white/blue at low opacity so they add depth without distracting. Center a bold headline and short paragraph over the beams. Use Tailwind CSS and CSS keyframes. No images.
中文提示词
创建一个深色区域,中央内容后方有对角动画光束交叉穿过。使用多条不同角度和透明度的细线,略带模糊,缓慢漂移或脉冲动画。光束应微妙——低透明度的白/蓝色,增加深度而不分散注意力。在光束上方居中放置粗体标题和短段落。使用 Tailwind CSS 和 CSS keyframes。无图片。

Overview
通过柔和交叉光束增加动感和深度的区域背景。灵感来自高端开发工具落地页。
Features
- 对角动画光束
- 多种角度和透明度
- 缓慢漂移/脉冲动画
- 微妙白/蓝色调
- 居中标题 + 段落
- 纯 CSS,无图片
Usage
用作深色产品页的功能区域、CTA 区域或页脚背景。
Customization
修改 prompt 以:
- 将光束颜色改为品牌强调色
- 在顶部和底部边缘添加渐变淡出
- 让光束响应滚动位置
- 添加微妙噪点纹理叠加