介绍
animated-icons 是一款可以让你的网站添加动画加载效果的 npm 包。它提供了超过 50 种动画效果，可以大大提升用户体验。
本文将详细介绍如何使用 animated-icons，包括安装、引入、配置以及使用等，帮助前端开发者快速上手使用。
安装
使用 npm 进行安装：
npm install animated-icons --save
引入
使用以下方式引入 animated-icons：
<link href="./node_modules/animated-icons/animated-icons.css" rel="stylesheet"> <script src="./node_modules/animated-icons/animated-icons.js"></script>
配置
animated-icons 可以通过配置来选择动画效果，并且支持自定义图标和颜色。
选择动画效果
animated-icons 提供了 50 多种动画效果，可以通过设置 class 来选择相应的效果。例如以下代码会使用飞鸟动画效果：
<div class="ai ai-bird"></div>
自定义图标
可以使用 FontAwesome 图标替换 animated-icons 默认图标。首先需要引入 FontAwesome：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
然后设置 ai-icon-class 属性为希望使用的 FontAwesome 图标的 class，例如使用图标“fa fa-camera”：
<div class="ai ai-icon" ai-icon-class="fa fa-camera"></div>
自定义颜色
可以使用 ai-color 属性来设置颜色。例如以下代码设置颜色为红色：
<div class="ai ai-spin" ai-color="red"></div>
使用
在页面中添加以下代码来展示 loading 动画：
<div class="ai ai-ball-clip-rotate"> <div></div> </div>
其中 class 为动画效果，div 为动画元素。
总结
通过以上步骤，我们可以方便地使用 animated-icons，提升用户体验。在具体项目中，我们可以根据需求选用相应的动画效果或进行自定义设置，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663c81e8991b448e23e1