如何使用animate.css动画库 |
您所在的位置：网站首页 › animate动态文本怎么弄 › 如何使用animate.css动画库 |
|
文章目录
前言一、animate.css是什么？二、使用步骤1.引入库1.1、在工程项目中引入1.2、在html文件引入
2.使用方法
三、dom
前言
随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库 提示：以下是本篇文章正文内容，下面案例可供参考 一、animate.css是什么？是一个前端的动画库，animate.css官网 二、使用步骤 1.引入库 1.1、在工程项目中引入用npm安装 npm install animate.css --save在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦) //main.js improt import 'animate.css'; 1.2、在html文件引入在head中 2.使用方法在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 leave-active-class 消失时候的效果动画 enter-active-class 显示时候的效果动画 其次需要注意的是，在添加动画前需要在动画名前加入animate.css的前缀animate__animated 代码如下（示例）： Login Register值得注意的是：需要将要使用动画的标签或组件加入到 transition标签当中、其次加入的标签需要有显示或者不显示的触发，比如v-if条件满足就显示... 三、dom DOCTYPE html> Document html, body { margin: 0; padding: 0; } .content { width: 100%; height: 100vh; } .content>div { /* border: #123 1px solid; */ top: 40%; position: relative; margin-left: 50%; left: -17%; width: 35%; height: auto; display: flex; justify-content: space-between; } .content>div button { background-color: rgb(59, 179, 116); border: none; border-radius: 30px; width: 200px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: larger; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 550; color: #fff; } .content>div button:hover { background-color: rgba(59, 179, 117, 0.591); } .enter { background-color: rgb(59, 179, 116); width: 100%; padding-top: 20%; text-align: center; /* display: flex; justify-content: center; align-items: center; */ font-size: larger; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 550; color: #fff; } .enter>button { width: 200px; position: relative; top: 20px; margin-left: 50%; left: -100px } .enter>button:hover { background-color: rgba(59, 179, 117, 0.591); } Login Register This is login Back to register This is register Back to login const { ref } = Vue const app = Vue.createApp({ template: "#root", setup(props, context) { let showLogin = ref(false) //login 是否展示 let showRegister = ref(false) //register 是否展示 let goOut = ref(true) // 第一展示页面 let goToLogin = () => { showLogin.value = true showRegister.value = false goOut.value = false } let goToRegister = () => { showRegister.value = true showLogin.value = false goOut.value = false } let change = () => { showLogin.value = !showLogin.value showRegister.value = !showRegister.value } return { showLogin, showRegister, goOut, goToLogin, goToRegister, change } } }) app.mount("#app") |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |