# animate

**Repository Path**: gongjs/animate

## Basic Information

- **Project Name**: animate
- **Description**: 动画演示
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-24
- **Last Updated**: 2025-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app

## README

# Animate

一个提供丰富动画效果和样式工具的前端项目，适用于需要动画和样式增强的网页开发。

## 特性

- **丰富动画效果**：提供多种 CSS 动画类，如 `bounce`, `fadeIn`, `zoomIn`, `slideIn` 等。
- **灵活样式工具**：包含通用样式类，如布局、颜色、字体、边距、填充等，便于快速开发。
- **响应式设计支持**：提供响应式布局工具类，如 `flex`, `row`, `col-*` 等。
- **可定制性强**：通过 SCSS 和模块化 CSS，便于主题和样式定制。

## 目录结构

- `common/`：存放通用 CSS 和数据文件。
  - `animate.css`：动画类样式。
  - `common.css`：通用 UI 样式类。
  - `free.css`：布局和响应式工具类。
  - `data.js`：通用数据定义。
- `static/`：静态资源图片。
- `App.vue`：主 Vue 组件。
- `main.js`：Vue 应用入口。
- `uni.scss`：SCSS 样式文件。
- `pages/`：页面组件目录。
- `manifest.json`, `pages.json`：项目配置文件。

## 使用说明

1. **引入样式文件**

   在项目中引入 `animate.css`, `common.css`, 和 `free.css` 以使用动画和样式工具。

2. **使用动画类**

   在 HTML 元素中添加动画类，例如：

   ```html
   <div class="animated bounce">这是一个弹跳动画</div>
   ```

3. **使用工具类**

   使用 `common.css` 和 `free.css` 中的工具类进行布局和样式设计：

   ```html
   <div class="flex justify-center align-center">弹性布局居中</div>
   ```

4. **添加图片资源**

   将 `static/` 目录中的图片资源引用到项目中：

   ```html
   <img src="/static/logo.png" alt="Logo">
   ```

## 开发环境

- Vue.js 框架
- SCSS 预处理器
- 支持模块化 CSS 和响应式设计

## 许可证

MIT License，详见 `LICENSE` 文件。