demo展示地址https://ianlunn.github.io/Hover/
下载地址https://github.com/IanLunn/Hover
这里我直接下的没有压缩古的hover.css. 只使用少数方便直接复制css
在展示地址中，找到自己想要的hover效果，记住它的hover名字
下载后就引入css文件到html中，在标签上使用 class="hvr-名字 "即可
<link rel="stylesheet" href="./hover.css">
<style>
div{
margin-top: 20px;
margin-left:20px;
width: 100px;
height: 50px;
background: orange;
}
</style>
<div class="hvr-grow">hover1</div>
<div class="hvr-sweep-to-top">hover2</div>
<div class="hvr-outline-in">hover3</div>
animate.css 官网地址:https://animate.style/
animate动效
栗子:
<div>
<button :class="['animated', active==index?'fadeInDown':'' ] " v-for="(item,index) of 3" :key="index" @click="ccc(index)">{{item}}</button>
</div>
import './animate.css'
active:'',
ccc(index){
this.active = index;
}