# 企业网站组件文档

**Repository Path**: guokeyf/componentsDocs

## Basic Information

- **Project Name**: 企业网站组件文档
- **Description**: 企业网站组件文档
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-17
- **Last Updated**: 2024-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CSS Animation Components Library

一个开箱即用的原生CSS动画组件库，提供丰富的动画特效和交互效果。

## 特性

- 🎨 纯CSS实现，无JavaScript依赖
- 📦 开箱即用，简单易上手
- 🎯 支持按需引入
- 📱 响应式设计
- 🚀 高性能，无性能负担
- 🛠 可自定义动画参数

## 快速开始

### 安装

您可以通过以下方式使用：

1. 使用 CDN：

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/guokeyf/componentsDocs@gh-pages/css/main.min.css">
```

2. 直接下载：

- [下载最新版本](https://gitee.com/guokeyf/componentsDocs/repository/archive/main.zip)
- [查看所有版本](https://gitee.com/guokeyf/componentsDocs/releases)

或者下载到本地使用：

```html
<link rel="stylesheet" href="path/to/css-animations.min.css">
```

### 基础使用

1. 淡入效果：

```html
<div class="animate-fade-in">淡入内容</div>
```

2. 滑动效果：

```html
<div class="animate-slide-up">向上滑入</div>
```

3. 悬停效果：

```html
<div class="hover-grow">
    <img src="example.jpg" alt="悬停放大">
</div>
```

## 组件列表

### 1. 基础动画

#### 淡入淡出系列
- `.animate-fade-in` - 淡入效果
- `.animate-fade-out` - 淡出效果
- `.animate-fade-in-up` - 向上淡入
- `.animate-fade-in-down` - 向下淡入

#### 滑动系列
- `.animate-slide-up` - 向上滑入
- `.animate-slide-down` - 向下滑入
- `.animate-slide-left` - 向左滑入
- `.animate-slide-right` - 向右滑入

#### 缩放系列
- `.animate-zoom-in` - 放大
- `.animate-zoom-out` - 缩小

### 2. 交互动画

#### 悬停效果
- `.hover-float` - 悬浮上升
- `.hover-grow` - 悬浮放大
- `.hover-shine` - 悬浮光效

#### 按钮动画
- `.click-ripple` - 点击波纹
- `.button-hover` - 悬浮效果
- `.button-press` - 按压效果

### 3. 文本动画

#### 文字效果
- `.text-typing` - 打字机效果
- `.text-reveal` - 文字渐显
- `.text-bounce` - 文字跳动

### 4. 过渡动画

#### 3D效果
- `.transition-flip` - 翻转效果
- `.transition-fold` - 折叠效果
- `.transition-rotate-3d` - 3D旋转

### 5. 进阶动画

#### 特效
- `.parallax-container` - 视差滚动
- `.gradient-animate` - 渐变背景
- `.morph` - 形状变换

### 6. 卡片动画

#### 交互效果
- `.card-hover` - 卡片悬浮
- `.card-expand` - 卡片展开
- `.card-flip` - 卡片翻转

### 7. ��标动画

#### 动态效果
- `.icon-spin` - 旋转动画
- `.icon-bounce` - 跳动效果
- `.icon-pulse` - 缩放效果
- `.icon-shake` - 摇晃效果
- `.icon-blink` - 闪烁效果

### 8. 加载动画

#### 加载效果
- `.loading-circle` - 圆形加载
- `.loading-dots` - 点阵加载
- `.loading-bar` - 进度条加载
- `.loading-wave` - 波浪加载

## 自定义配置

可以通过CSS变量自定义动画参数：

```css
:root {
    /* 动画持续时间 */
    --animation-duration-fast: 200ms;
    --animation-duration-normal: 300ms;
    --animation-duration-slow: 500ms;
    
    /* 动画缓动函数 */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
}
```

## 项目结构

```
css-animations/
├── docs/                # 文档目录
│   ├── components/      # 组件文档
│   └── examples/        # 示例文档
├── src/                 # 源代码目录
│   ├── components/      # 组件源码
│   ├── styles/          # 样式文件
│   └── utils/          # 工具函数
├── demo/               # 演示页面
└── dist/               # 构建输出目录
```

## 浏览器支持

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

## 开发计划

- [x] 完成基础动画组件
- [x] 创建演示页面
- [x] 编写基础文档
- [ ] 添加更多交互动画
- [ ] 优化动画性能
- [ ] 添加动画组合功能
- [ ] 支持动画序列

## 许可证

本项目使用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情