css3 动画工具 Animate.css
程序员文章站
2022-03-16 19:10:27
...
Animate.css官网:https://animate.style/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<h1 class="animate__animated animate__bounce">An animated element</h1>
</body>
</html>
在 vue 中使用
// index 中 走cdn 加速
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
// App.vue
<transition
name="custom-classes-transition"
enter-active-class="animated bounce"
leave-active-class="animated bounceOutRight"
>
<router-view></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</transition>
上一篇： php怎么默认打开index
下一篇： CSS3之动画