前端必知：31. animate动画库 及 iconfont矢量库的使用

目录

一，animate动画库 

介绍

使用animate.css

1.直接在元素上使用

2.使用animate.css的动画名

二，iconfont矢量库的使用

使用步骤

---

一，animate动画库 

介绍

网站地址：Animate.css | A cross-browser library of CSS animations.

网站首页

 在animate动画库我们能看到丰富多样的动画效果，对于工作和学习而言有很大的参考价值，并且他的使用方法也很简便。

具体来说，Animate提供了一组预定义的动画效果和转换功能，您可以轻松地使用这些效果来为网页元素添加动画。您可以通过指定动画名称、持续时间、延迟、重复次数等参数来定制和控制动画的行为。

Animate支持各种常见的动画效果，例如淡入淡出、移动、旋转、缩放、颜色变化等。您还可以创建复杂的动画序列，通过链式调用不同的动画效果来实现更多样化和连贯的动画效果。

除了预定义的动画效果，Animate还提供了自定义动画的能力。您可以使用关键帧函数来创建自定义的动画效果，根据您的需求来调整元素的属性值。

Animate还具有良好的兼容性，它可以在各种现代浏览器中正常运行，并且可与其他JavaScript库和框架集成使用。

总体而言，Animate动画库是一个功能强大且使用简便的工具，它为网页开发者提供了丰富的动画效果。无论是在工作中创建专业的网页界面，还是在学习过程中学习动画设计和实现，Animate都可以是一个有价值的参考资源

使用animate.css

1.直接在元素上使用

      直接在元素上使用， 需要添加公共类 animate_animated ，然后根据效使用 动画类名 ， 注意以animate__为前缀 animate__动画名

2.使用animate.css的动画名

       使用animate.css的动画名，不用刻意添加类名，可以直接在css中声明 animation 属性，然后他的动画名是animate.css中的动画名即可

二，iconfont矢量库的使用

使用步骤

        1.下载图标并且引入iconfont.css

        2.在使用的标签上引用类名iconfont

        3.引用需要的图标类

     

进入 iconfont 首页点击图标库

 进入图标库后选择要下载的图标（可以先放入购物车）

 点击购物车看到下面的选项，选中下载代码，代码下载后解压放到项目中

 完成上面步骤后只需要链接iconfont.css 在使用的标签上引用类名iconfont就可以正常使用了，图标的大小颜色等待都可以通过css调整