介绍
这是一个以蓝白圆润卡通角色为主体的插画素材展示页，首屏直接展示角色插画、切换按钮和素材亮点，适合用作图片素材、贴纸包或头像包的下载承载页面。
技术栈
项目由原生 HTML、CSS 和 JavaScript 组成，不依赖打包工具和外部 CDN。页面可以直接放入静态站点，也可以拆分到 Vue、React 或后台模板工程中继续复用。
软件架构
- index.html：页面结构、交互面板和主体特效舞台。
- styles.css：配色变量、布局体系、动画节奏和响应式处理。
- script.js：状态切换、按钮行为、文本输入或图片切换等真实交互逻辑。
- preview.png：真实浏览器截图，可直接用于下载页缩略图。
安装教程
- 下载 zip 并解压到本地目录。
- 进入同名文件夹后双击 index.html，即可在浏览器中查看效果。
- 如需部署，只要上传整个目录到静态空间即可。
- 如需二次集成，可以按需拷贝 HTML 结构、CSS 模块和 JS 逻辑。
使用说明
通过按钮可以快速切换笑脸、眨眼和挥手三种展示状态，替换标题、标签和角色配色后，就能继续扩展成更多插画素材包页面。
- 替换页面文案、数据数组或图片占位内容，即可得到新的主题版本。
- 保留按钮状态、输入反馈或切换逻辑，能让下载后的页面直接用于演示或项目原型。
- 调整 styles.css 中的颜色变量与尺寸，即可快速适配品牌风格。
功能讲解
- HTML：把插画舞台、按钮区和说明区拆开，方便继续接更多缩略图或分类。
- CSS：用纯 CSS 图形搭出角色主体，首屏截图直接能体现图片素材的可用性。
- JavaScript：只处理表情切换和标签同步，让页面交互清晰且容易维护。
