# Daily Buzz — 科技新闻门户 > 参赛作品 · EdgeOne Makers × WorkBuddy AI 编程挑战赛 > 赛道：AI 编程 · 炫酷科技风每日新闻门户 --- ## 作品信息 | 字段 | 内容 | |---|---| | 作品名称 | Daily Buzz（每日科技新闻） | | 类型 | 科技新闻门户 | | 技术栈 | 纯 HTML + CSS + JavaScript（Canvas 动画） | | 部署平台 | EdgeOne Makers |Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills， then deploy to EdgeOne Makers. | 设计风格 | 深色赛博朋克 + 全息科技 HUD | --- ## 作品介绍 Daily Buzz 是一款以"科技新闻 一屏掌握"为核心理念的每日科技新闻门户。 ### 设计亮点 1. **全屏沉浸式 Hero 区域** - Canvas 粒子网络背景，鼠标交互斥力效果 - 全息机器人 + 悬浮数据屏幕场景 - 赛博朋克 HUD 叠加层（四角瞄准框、扫描线、数据面板、透视网格） 2. **渐变流光标题** - 大字号科技感标题（4-7.5rem） - CSS 渐变背景动画实现流光效果（8-10秒慢速循环） - 柔和文字光晕阴影 3. **玻璃拟态卡片** - 半透明背景 + 毛玻璃模糊 - 分类专属渐变色彩（AI紫、芯片青、手机粉、新能源绿） - 悬浮上浮 + 边缘发光交互效果 4. **炫酷数据统计模块** - 页面底部专业数据展示 - 扫描线动画 + 渐变边框呼吸效果 - 数字递增动画 5. **Canvas 神经网络动画** - AI 专区背景动态神经网络 --- ## 完整 Prompt ``` Build a single-page tech news portal called "Daily Buzz" with a cyberpunk holographic HUD aesthetic. --- ## DESIGN PHILOSOPHY The site should feel like: - Cyberpunk / Sci-fi command center - Holographic display interface - Dark, immersive, professional - Glassmorphism cards - Neon accent glows (cyan #00d4ff + purple #7c3aed) - Binary/tech data visual elements --- ## COLOR PALETTE - Background: #000000 (pure black) - Primary Accent: #00d4ff (neon cyan) - Secondary Accent: #7c3aed (purple) - Highlight: #a78bfa (light purple) - Text: #f5f5f7 (off-white) - Muted Text: rgba(255,255,255,0.4-0.7) Category Colors: - AI: #a78bfa (purple) - Chip: #00d4ff (cyan) - Phone: #ff6b9d (pink) - EV: #30d158 (green) --- ## SITE STRUCTURE ### 1. FIXED NAVBAR - Fixed top, transparent initially, becomes frosted glass on scroll - Logo: ⚡ icon + "Daily Buzz" text - Nav links: AI, 芯片, 手机, 新能源 - Subscribe button (ghost style) - Border-bottom appears on scroll with purple tint ### 2. HERO SECTION (100vh) Background layers (z-index order): 1. Canvas particle network (connections + glowing particles, mouse repel effect) 2. Canvas robot silhouette + holographic floating data screens with binary text 3. HUD overlay: - 4 corner brackets (cyan glow) - Scanning line animation (top to bottom, 4s loop) - 2 data panels (SYS_STATUS, NODE_SYNC) - Perspective grid floor (2-layer depth effect) Content (centered): - Headline: "科技新闻" + "一屏掌握" (large gradient text with slow shine animation) - Subtitle: "每日精选 AI、芯片、手机、新能源等领域最重要资讯" - CTA Button: "立即阅读" (glassmorphism with sweep animation on hover) ### 3. CONTENT SECTIONS (4 categories) Each section: - AI (id="ai"): Purple accent, neural network canvas background - Chip (id="chip"): Cyan accent, subtle grid pattern - Phone (id="phone"): Pink accent - EV (id="ev"): Green accent, mini stats grid Section structure: - Section header with icon, title, subtitle - "X 条资讯" count badge - "查看全部 →" link - News grid (auto-fill, min 320px) - Featured card (spans 2 columns) + regular cards News card design: - Semi-transparent background - Tag badges (热门/新品/趋势/深度/讨论) - Title (2-line clamp, hover turns cyan) - Description (3-line clamp) - Footer: source + time, engagement (views, comments) - Hover: lift up, border glow, shadow ### 4. STATS MODULE (bottom of page) - Dark glassmorphism card - Horizontal scan line animation (4s loop) - Gradient border with subtle breathing effect - 5 data items: 核心板块, 今日资讯, 关注用户, 科技股涨幅, 今日热点 - Number count-up animation on scroll into view - Hover: item lifts, number glows ### 5. FOOTER - Simple centered layout - Brand + tagline - Copyright --- ## CSS ANIMATIONS REQUIRED 1. **Text Shine Animation** (8-10s cycle, slow and smooth) - Gradient background position moves slowly - Use cubic-bezier for natural easing - Two lines have different timings/delays 2. **Scanning Line** (4s linear, top to bottom) - Thin bright line with glow shadow - Fades at bottom 3. **Button Sweep Effect** - Light band sweeps across on hover 4. **Card Hover Transitions** - Smooth lift (translateY) - Border color change - Shadow expansion 5. **Stats Border Glow** (4s, subtle breathing) - Border opacity pulses gently 6. **Neural Network Canvas** - Nodes pulse with sine wave - Connections fade based on distance --- ## CANVAS IMPLEMENTATIONS ### Hero Canvas (Particle Network) - Particles: random position, slow velocity, cyan/purple colors - Connections: draw lines when particles are close (< 140px), opacity based on distance - Mouse repel: particles push away from cursor - Neon flow lines: occasional diagonal light streaks ### Robot + Holographic Screen Canvas - Robot silhouette: bezier curves, semi-transparent fill - Circuit traces: animated progress lines - 3 floating data cards with binary text - Connection line from robot finger to screen - Touch ripple effect at connection point ### AI Section Neural Network - Floating nodes with pulse animation - Connecting lines between nearby nodes - Subtle glow effect --- ## INTERACTIVE FEATURES 1. **Navbar**: Becomes frosted glass when scrolled 2. **Smooth scroll**: Nav links smooth scroll to sections 3. **Scroll reveal**: Sections fade in when scrolling into view 4. **Count-up numbers**: Stats animate from 0 to target value 5. **Mouse interaction**: Hero particles repel from cursor 6. **Card hover**: Lift + glow + title color change --- ## RESPONSIVE DESIGN - Mobile: Single column news grid - Tablet: 2-column grid - Desktop: Full layout with all effects - Use clamp() for fluid typography - Breakpoints: 768px, 1024px --- ## TECHNICAL NOTES - Single HTML file (index.html) - Inline CSS in