Font Awesome Animation

Font Awesome动画使用指南

简介
Font Awesome Animation 是一个简单利用 CSS3 动画效果增强 Font Awesome 图标展示的工具，适用于网页中的各种图标动画效果。

开始使用

1. 安装

   • 通过NPM安装：

     npm install font-awesome-animation

   • 或使用CDN链接：

     <link rel="stylesheet" href="https://www.jsdelivr.com/package/npm/font-awesome-animation">

     确保将此链接添加到你的 index.html 文件中。

2. 引入CSS文件
   在你的HTML文件头部加入以下代码引用CSS样式：

   <link rel="stylesheet" href="font-awesome-animation.min.css">

3. 基本用法

   • 页面加载时动画：
     为图标元素添加 faa-xxx（其中 xxx 是具体动画名）和 animated 类：

     <i class="fa fa-wrench faa-wrench animated"></i>

   • 鼠标悬停时动画：
     将 animated 替换为 animated-hover：

     <i class="fa fa-wrench faa-wrench animated-hover"></i>

   • 父元素悬停时动画：
     在父元素上添加 faa-parent 和 animated-hover 类：

     <a href="#" class="faa-parent animated-hover">
       <i class="fa fa-wrench faa-wrench" style="font-size: 3em;"></i> 鼠标悬停此处
     </a>

4. 动画速度控制
   添加 faa-fast 或 faa-slow 类来调整动画速度：

   <i class="fa fa-wrench faa-wrench animated faa-fast"></i> <!-- 快速 -->
   <i class="fa fa-wrench faa-wrench animated faa-slow"></i> <!-- 缓慢 -->

5. 查看动画列表
   访问项目GitHub页面预览所有动画效果。

开发与构建

• 构建步骤

  1. 安装依赖：

     npm install

  2. 生成前缀和压缩CSS文件：

     npm run build

• 本地预览
  可以使用 http-server 或 Markdown 预览工具在本地测试。

• 发布新版本
  使用npm命令创建新版本并推送到远程仓库，然后手动在GitHub发布页面创建新版本。有自动工作流负责发布到NPM仓库。