Animate.css的使用

一、安装

bash 复制代码
npm install animate.css --save

二、引入

bash 复制代码
import 'animate.css';

三、使用

bash 复制代码
     <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;
}

四、效果展示

相关推荐
Vicky&James1 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_748233645 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟13 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386314 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596015 分钟前
前端代理,解决跨域问题讲解
前端
quitv20 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238128 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星30 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
_GR44 分钟前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios