# Animate+gsap动画展示网站

**Repository Path**: mo-bin/Animate-gsap-show

## Basic Information

- **Project Name**: Animate+gsap动画展示网站
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-23
- **Last Updated**: 2025-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 人工智能产品展示网站

这是一个展示人工智能产品的单页滚动式网站，采用现代化的网页设计和丰富的动画效果。

## 项目特点

- 响应式设计，适配各种设备屏幕
- 丰富的动画效果，包括：
  - GSAP滚动触发动画
  - Three.js 3D产品展示
  - CSS过渡和变换效果
- 现代化UI设计
- 优化的性能和加载体验

## 技术栈

- HTML5
- CSS3 (Tailwind CSS)
- JavaScript (ES6+)
- GSAP (动画库)
- Three.js (3D渲染)
- Font Awesome (图标)

## 项目结构

```
WebAnimation/
├── index.html          # 主页面
├── css/
│   ├── styles.css      # 自定义样式
│   └── font-awesome.min.css
├── js/
│   ├── main.js         # 主要JavaScript逻辑
│   ├── product3d.js    # Three.js 3D展示逻辑
│   ├── gsap.min.js
│   ├── ScrollTrigger.min.js
│   └── tailwindcss.js
└── assets/            # 资源文件夹
    └── images/        # 图片资源
```

## 功能模块

1. 首页Hero区域
   - 渐入动画效果
   - 响应式标题和描述

2. 3D产品展示
   - 交互式3D模型
   - 自动旋转效果
   - 鼠标控制视角

3. 产品展示区
   - 滚动触发动画
   - 悬停效果
   - 响应式布局

4. 特色功能区
   - 动态内容加载
   - 滚动动画效果

5. 联系表单
   - 响应式设计
   - 表单验证

## 动画效果说明

### GSAP动画
- 页面元素的淡入和位移效果
- 滚动触发的序列动画
- 产品卡片的动态展示

### Three.js动画
- 3D产品模型展示
- 自动旋转效果
- 光照效果

### CSS动画
- 悬停效果
- 过渡动画
- 加载动画

## 使用说明

1. 克隆项目到本地
2. 使用现代浏览器打开index.html
3. 确保所有资源文件路径正确

## 性能优化

- 使用CDN加载第三方库
- 图片懒加载
- CSS动画硬件加速
- JavaScript代码模块化

## 浏览器支持

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 注意事项

- 需要现代浏览器支持
- 建议使用支持WebGL的浏览器以获得最佳3D展示效果
- 确保启用JavaScript