vue.js实现点击图标放大离开时缩小的代码


Posted in Vue.js onJanuary 27, 2021

上篇文章给大家介绍了vue实现裁切图片同时实现放大、缩小、旋转功能 ,今天给大家介绍vue.js实现点击图标放大离开缩小功能,具体代码如下所示:

@-webkit-keyframes pulse1 {
 from {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
 }
 
 to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 
 /* to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 } */
}
@keyframes pulse1 {
 from {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
 }
 
 to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 
 /* to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 } */
}
 
.pulse1 {
 -webkit-animation-name: pulse1;
 animation-name: pulse1;
}
 
@-webkit-keyframes pulse {
 from {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 
 to {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
 }
 
 /* to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 } */
}
 
@keyframes pulse {
 from {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 
 to {
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  transform: scale3d(1.05, 1.05, 1.05);
 }
 
 /* to {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 } */
}
 
.pulse {
 -webkit-animation-name: pulse;
 animation-name: pulse;
}
 
.animate1 {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

到此这篇关于vue.js实现点击图标放大离开时缩小的代码的文章就介绍到这了,更多相关vue实现点击图标放大离开缩小内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
vscode自定义vue模板的实现
Jan 27 #Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 #Vue.js
vue实现轮播图帧率播放
Jan 26 #Vue.js
vue 组件基础知识总结
Jan 26 #Vue.js
深入了解Vue动态组件和异步组件
Jan 26 #Vue.js
如何在 Vue 表单中处理图片
Jan 26 #Vue.js
You might like
php a simple smtp class
2007/11/26 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Python实现子类调用父类的方法
2014/11/10 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
python tkinter组件使用详解
2019/09/16 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
Pycharm小白级简单使用教程
2020/01/08 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
工商管理专业毕业生求职信
2014/05/26 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
2014年保卫工作总结
2014/12/05 职场文书
七年级思品教学反思
2016/02/20 职场文书