Dark canvas, Tesla Red highlight. Fullpage · Parallax · ECharts.
主视觉 / Hero
功能要点 / Features
数据可视化 / Chart
建议:用 clamp() 控制标题字号,用 minmax() 与 fr 单位搭配 Grid。
/* Aurora 背景片段(仅品牌红自身透明度渐变) */
.aurora .blob.red-a{
background:radial-gradient(40% 40% at 50% 50%, rgba(227,25,55,.55), rgba(227,25,55,0) 65%);
}
.aurora .blob.red-b{
background:radial-gradient(35% 35% at 50% 50%, rgba(227,25,55,.32), rgba(227,25,55,0) 62%);
}
提示:避免多高亮色互相渐变串色;若要多色,请分层渲染并控制不透明度。
角色:你是前端设计工程师,使用 Tailwind + fullPage.js + ECharts。
目标:生成暗色主题演示站点,首屏为 Aurora Gradient Hero,品牌红 #E31937。
信息架构:Hero / 工具集 / 布局 / 渐变 / 图表 / CTA。
约束:不使用 emoji;仅 transform/opacity 动效;可访问性 AA;无控制台报错。
产出:单文件 HTML,CDN 引入依赖,注释清晰。