Animate.css的使用
一、安装
npm install animate.css --save
二、引入
import 'animate.css';
三、使用
<h1
class="animate__animated animate__bounce"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
An animated element
</h1>
//在js中的方法
function mouseenter(e) {
e.target.className = "animate__animated animate__bounce";
}
function mouseleave(e) {
e.target.className = "";
}
//可以自行调节动画速度
/* This only changes this particular animation duration */
// 仅仅修改此动画
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* This changes all the animations globally */
// 全局修改动画
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
四、效果展示
原文地址：https://blog.csdn.net/weixin_45580774/article/details/140662373
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！