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;
}

四、效果展示

相关推荐
不想有bug的小菜鸟3 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238634 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559605 分钟前
前端代理,解决跨域问题讲解
前端
quitv10 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238119 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星20 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
_GR34 分钟前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft
一粒沙-40 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen44 分钟前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架