RoboDog - 宠物狗机器人网站

项目简介

RoboDog是一个现代化的宠物狗机器人产品展示网站，展示了智能机器人的功能特点、产品展示和技术规格。

技术栈

• HTML5: 语义化标记
• CSS3: 响应式设计和动画效果
• JavaScript: 交互功能和用户体验优化

主要功能

• 🎨 现代化的响应式设计
• 🤖 可爱的机器人动画效果
• 📱 移动端友好的界面
• ✨ 平滑滚动和交互动画
• 📝 联系表单功能
• 🎯 产品展示和功能介绍

网站结构

webdemo/
├── index.html      # 主页面
├── styles.css      # 样式文件
├── script.js       # JavaScript交互
└── README.md       # 项目说明

特色功能

1. 智能导航栏

• 固定在顶部，滚动时自动隐藏/显示
• 移动端响应式汉堡菜单
• 平滑滚动到各个页面部分

2. 机器人动画

• CSS动画制作的可爱机器人形象
• 眼睛跟随鼠标移动效果
• 点击交互时的弹跳动画
• 随机眨眼效果

3. 交互效果

• 功能卡片的滚动显示动画
• 按钮涟漪点击效果
• 表单验证和提交反馈
• 通知提示系统

4. 响应式设计

• 完全响应式布局
• 移动端优化
• 平板设备适配

页面部分

英雄区域 (Hero)

• 渐变背景设计
• 产品主标题和副标题
• 行动按钮（购买、演示）
• 机器人插图展示

功能特点 (Features)

• 6个核心功能卡片
• 图标和描述展示
• 悬停动画效果

产品展示 (Gallery)

• 产品图片展示
• 描述文字
• 图片悬停放大效果

技术规格 (Specifications)

• 产品技术参数
• 网格布局展示
• 清晰的分类信息

联系我们 (Contact)

• 联系信息展示
• 在线表单
• 社交媒体链接

如何使用

1. 克隆项目

   git clone https://github.com/fishergithub/webdemo.git

2. 进入项目目录

   cd webdemo

3. 直接在浏览器中打开

   # 直接双击 index.html 文件
   # 或者使用 live server 等工具

自定义和扩展

修改主题颜色

在 styles.css 中修改主要颜色变量：

:root {
    --primary-color: #4A90E2;
    --secondary-color: #50C878;
    --accent-color: #FF6B6B;
}

添加新功能

在 script.js 中添加新的交互功能，记得：

• 遵循现有的代码结构
• 添加适当的注释
• 测试在不同设备上的兼容性

响应式断点

主要的响应式断点：

• 768px: 平板设备
• 480px: 手机设备

浏览器兼容性

• Chrome (推荐)
• Firefox
• Safari
• Edge
• 移动端浏览器

贡献

欢迎提交问题和改进建议！

许可证

MIT License

联系方式

• 项目地址: https://github.com/fishergithub/webdemo
• 邮箱: info@robodog.com

---

🤖 让RoboDog为您带来智能宠物体验！