返回赛题列表
页面切换过渡动画系统
进阶设计实现一套包含 5 种以上创意过渡效果的页面切换展示系统，页面内容自由发挥但必须各不相同且有实际内容，不使用任何 JS 动画库，纯 CSS + Vanilla JS 实现，考察 CSS 动画创意、手写动画功力和页面内容设计能力。
规则说明▼
模型需要生成一个单文件 HTML（内联 CSS + 原生 JS），不得使用 JSX 或任何需要编译的语法。
页面是一个过渡动画展示系统，包含多个内容各不相同的展示页面和多种可切换的过渡效果。所有视觉元素必须用 CSS/SVG/HTML 实现，不得使用外部图片，不得使用任何 JS 动画库（如 GSAP、Anime.js、Framer Motion 等）。
Prompt▼
phase1：▼
做一个页面切换过渡动画展示系统。
包含至少 5 个内容各不相同的展示页面（主题、配色、布局自由发挥，但每页必须有实际内容，不能是空白色块或纯占位文字），以及至少 5 种不同的页面切换过渡效果（不能只是 fade 和 slide 的变体，要有真正的创意）。
要求：底部或侧边有效果选择器，可以切换当前使用的过渡效果；有上一页/下一页导航；过渡动画流畅不卡顿，时长合理；不使用任何 JS 动画库，纯 CSS + Vanilla JS 实现。
请输出完整的HTML。