hover.css & animate.css使用

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