vue中使用hover.css动画
vue中使用hover.css动画
介绍：一组 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等。轻松应用于您自己的元素、修改或仅用于灵感。在 CSS、Sass 和 LESS 中可用。
1.下载hover.css
npm i hover.css --save
2. 全局映入css
import 'hover.css'
3.使用类，加上类名 button hvr-bounce-to-left
<div class="an button hvr-bounce-to-left">天天向上，好好学习</div>.an {height: 100px;width: 200px;background-color: blueviolet;border-radius: 10px;float: left;margin: 10px;vertical-align: middle;
}
4.拿到想要的样式类名 通过f12查看div上面的class类名 点击下面链接地址
hover.css 链接地址
总结：以上四步就可以实现hover.css动画的基本使用。
页面所有代码
<template><!-- http://ianlunn.github.io/Hover/ hover css动画网址 -->//图层左弹出<div class="an button hvr-bounce-to-left">天天向上，好好学习</div>//图层右弹出<div class="an button hvr-sweep-to-right">天天向上，好好学习</div><div class="an button hvr-grow">天天向上，好好学习</div>
</template><script lang="ts">
import { defineComponent } from "vue";
import "hover.css";
export default defineComponent({setup() {},
});
</script><style scoped>
.an {height: 100px;width: 200px;background-color: blueviolet;border-radius: 10px;float: left;margin: 10px;vertical-align: middle;
}
</style>vue中使用hover.css动画相关推荐
- Vue中的过度与动画
一.Vue中的过度效果 下面让我们一起来学习一下vue中的过滤与动画 当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动监测目标元素是否应用了 CSS 过渡或动画 ...
- Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局 CSDN:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/ar ...
- vue html css,HTML+CSS入门 在vue中使用animate.css
本篇教程介绍了HTML+CSS入门 在vue中使用animate.css,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < animate.css是一款前端动画库,相似的有v ...
- Vue中的基础过渡动画原理解析
前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡 ...
- vue中使用 wow.js 动画插件
1. 安装 npm install wowjs --save (animate.css会被自动安装,但是这里有坑) 官网地址:wowjs animate.css 2. 在main.js中引入anima ...
- Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定 前言 一.表格数据 二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结 前言 大家一定使用过很多UI,UI都 ...
- Vue中使用animate.css
最近把公司官网项目依赖进行了升级,里面用到了animate.css.目前版本4.1.0. 目前4.x版本相比之前3.x的breaking change如下: Animate.css v4 brough ...
- vue实现动态css,Vue中如何动态绑定CSS
学习VUE2.0,想尝试做个在表格中,选中不同的列,将该列设置一个CSS.但是不成功.请赐教~~非常感谢! 先上代码 html代码 操作IDNameEmail {{list.id}}{{list.na ...
- vue中loading chunk-xxx.css failed和net::ERR_ABORTED 404 解决方法
文章目录 前言 1. 问题现象 2. 解决方法 3. 总结问题出现原因 前言 本文只是记录了自己经历项目出现的Loading chunk-xxx.css failed问题出现的原因和解决方法,该问题出 ...
最新文章
- cython安装、使用
- 树莓派悄悄放了个微软“后门”，系统加入微软源却未告知，用户怒了
- Centos下GCC引用mysql头文件和库文件
- ora-01034 / ORA-27101 错误.
- laravel php resources,利用 Laravel Resources 来整合第三方 API 数据
- 词汇挖掘与实体识别（未完）
- 飞鸽传书完全不知道这是什么
- potplayer播放器的下载与截图配置
- word插入visio图显示不完全
- 安卓投屏大师_苹果屏幕镜像怎么使用,AirPlay镜像怎么投屏？
- 学不会模具设计的原因你知道吗？
- 苹果创建账号显示服务器出错,创建iCloud id 提示：无法创建
- oracle rac 部署方案,RAC基础设施部署方案
- html批量处理图片大小,如何批量修改图片大小？批量处理图片尺寸的方法
- 基于腾讯地图定位组件实现周边POI远近排序分布图
- tp5子域名index.php,tp5实现绑定子域名，并且根据子域名定义路由规则
- 膜拜大神，Linux之父家中停电6天，竟然还码出新版Linux内核！
- 古月居21讲 第17-18讲学习日记 tf坐标系
- ECharts 安装和实现-echarts.min.js
- Java生成图片验证码(有点仿QQ验证码的意思)