#前端开发# 【一】之Animate动画库的安装及详细用法

#前端开发# 之Animate动画库的安装及详细用法

在前端的开发过程中，我们免不了需要动画来实现更多酷炫效果，
下面主要是介绍Animate这款强大的动画库，以及其安装及使用

相信大家也已经了解过Animate，这里就不赘述了~~
下面是Animate的官网

一.官网各个版块的主要作用

温馨提示：如果英文不怎么好的胖友，
也可以使用谷歌自带的网页翻译器，将官网翻译成中文，
最好就看英文文档啦，顺便练一下英文哈哈哈哈哈哈哈

二.Animate的使用

在vue里使用
（1）安装
在ws下面这个位置，输入cnpm install animate.css --save

cnpm install animate.css --save

（2）在main.js中引用并使用


import animate from 'animate.css'Vue.use(animate);

具体在这些位置进行引用

下面是最后一步，也是最重要的一步，我们要进行使用

（3）使用并使用类名

举个例子，
需求：点击p标签，就可以触发动画

<div><p class="shadow-drop-2-bl">动画盒子</p>
<!-- 直接使用Animate中的动画class名，注意：必须使用在Animate选取样式的class名，否则动画会无效 -->
</div>
<style scoped>
// 加入hover,就可以让鼠标经过p标签时，就可以触发动画
.shadow-drop-2-bl：hover {-webkit-animation: shadow-drop-2-bl 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;animation: shadow-drop-2-bl 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}/* ----------------------------------------------* Generated by Animista on 2021-5-25 23:4:34* Licensed under FreeBSD License.* See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista* ---------------------------------------------- *//*** ----------------------------------------* animation shadow-drop-2-bl* ----------------------------------------*/
@-webkit-keyframes shadow-drop-2-bl  {0% {-webkit-transform: translateZ(0) translateX(0) translateY(0);transform: translateZ(0) translateX(0) translateY(0);-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}100% {-webkit-transform: translateZ(50px) translateX(12px) translateY(-12px);transform: translateZ(50px) translateX(12px) translateY(-12px);-webkit-box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);}
}
@keyframes shadow-drop-2-bl {0% {-webkit-transform: translateZ(0) translateX(0) translateY(0);transform: translateZ(0) translateX(0) translateY(0);-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}100% {-webkit-transform: translateZ(50px) translateX(12px) translateY(-12px);transform: translateZ(50px) translateX(12px) translateY(-12px);-webkit-box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);box-shadow: -12px 12px 20px -12px rgba(0, 0, 0, 0.35);}
}</style>

以上，完毕。

#前端开发# 【一】之Animate动画库的安装及详细用法相关推荐

html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画
使用animate动画库添加鼠标经过动画蓝叶网站设计 2016-11-27 11679 4评论 animate是一个css3动画库,使用它简单几步就能很轻松的为网站增加各种 ...
前端必会的anime动画库
CSDN话题挑战赛第2期参赛话题:学习笔记大家好,我是前端实验室的大师兄!一名资深的互联网玩家,专注分享大前端领域技术.面试宝典.学习资料等~ 新年公司派给我的第一个项目就是一个小游戏,游戏中涉及 ...
安装使用Animate动画库【Animate.css下载安装教程】
Animate.css官网地址 1.npm安装Animate.css npm install animate.css --save 2.在入口文件main.js中导入 // 导入动画库 import ...
2019年下半年1+X 证书 Web 前端开发初级理论考试题目原题+答案(超详细分析)
2019年下半年1+X 证书 Web 前端开发初级理论考试题
2022新版前端开发工具vscode使用教程之下载安装详解
IDE(Integrated Development Environment,集成开发环境)是含代码编辑器.关键词高亮.智能感应.智能纠错.格式美化.版本管理等功能于一身的 "高级代码编辑器 ...
animate动画库的使用步骤
一.简介辅助我们实现页面的的一些动画效果,比如抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/f ...
前端开发中ui(antd)表格导出为excel。详细步骤一看就会
我们在开发的时候往往有这样的需求,将页面上的表格导出为excel文件.以随手写的demo为例. 1.首先我们需要下载一个插件,用于将页面中的数据转为excel文件可以通过我们的package.jso ...
Web前端：2022年最佳Javascript动画库
当你考虑制作网站时,你首先考虑的是如何使你的网站脱颖而出,虽然有很多方法可以让它脱颖而出,比如发布独特的内容.制作引人入胜的视频和文章,但吸引人的最佳方式之一是动画和图形.前端开发人员利用Javasc ...
anime.js 动画_Anime.js –轻量级JavaScript动画库
网络动画已经走了很长一段路. 开发人员不仅可以使用CSS / SVG / JS组合制作任何动画,而且还提供数十个免费库来节省时间. 我的最爱之一是Anime.js ,这是一个完全免费的开源JavaSc ...

#前端开发# 【一】之Animate动画库的安装及详细用法

#前端开发# 之Animate动画库的安装及详细用法

#前端开发# 【一】之Animate动画库的安装及详细用法相关推荐

最新文章

热门文章

#前端开发# 【一】 之Animate动画库的安装及详细用法

#前端开发# 之Animate动画库的安装及详细用法

#前端开发# 【一】 之Animate动画库的安装及详细用法相关推荐

最新文章

热门文章

#前端开发# 【一】之Animate动画库的安装及详细用法

#前端开发# 【一】之Animate动画库的安装及详细用法相关推荐