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实现点击切换验证码(组件)及校验
Nov 18 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
Vue深入理解插槽slot的使用
Aug 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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php判断linux下程序问题实例
2015/07/09 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
总经理驾驶员岗位职责
2013/12/04 职场文书
老公给老婆的保证书
2014/04/28 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
任命书标准格式
2015/03/02 职场文书
故意伤害罪辩护词
2015/05/21 职场文书