• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
123457684 显示全部楼层 发表于 2021-10-25 20:23:31 |阅读模式 打印 上一主题 下一主题
上篇文章给大家介绍了vue实现裁切图片同时实现放大、缩小、旋转功能 ,本日给大家介绍vue.js实现点击图标放大离开缩小功能,具体代码如下所示:
  1. @-webkit-keyframes pulse1 {
  2. from {
  3.   -webkit-transform: scale3d(1.05, 1.05, 1.05);
  4.   transform: scale3d(1.05, 1.05, 1.05);
  5. }
  6. to {
  7.   -webkit-transform: scale3d(1, 1, 1);
  8.   transform: scale3d(1, 1, 1);
  9. }
  10. /* to {
  11.   -webkit-transform: scale3d(1, 1, 1);
  12.   transform: scale3d(1, 1, 1);
  13. } */
  14. }
  15. @keyframes pulse1 {
  16. from {
  17.   -webkit-transform: scale3d(1.05, 1.05, 1.05);
  18.   transform: scale3d(1.05, 1.05, 1.05);
  19. }
  20. to {
  21.   -webkit-transform: scale3d(1, 1, 1);
  22.   transform: scale3d(1, 1, 1);
  23. }
  24. /* to {
  25.   -webkit-transform: scale3d(1, 1, 1);
  26.   transform: scale3d(1, 1, 1);
  27. } */
  28. }
  29. .pulse1 {
  30. -webkit-animation-name: pulse1;
  31. animation-name: pulse1;
  32. }
  33. @-webkit-keyframes pulse {
  34. from {
  35.   -webkit-transform: scale3d(1, 1, 1);
  36.   transform: scale3d(1, 1, 1);
  37. }
  38. to {
  39.   -webkit-transform: scale3d(1.05, 1.05, 1.05);
  40.   transform: scale3d(1.05, 1.05, 1.05);
  41. }
  42. /* to {
  43.   -webkit-transform: scale3d(1, 1, 1);
  44.   transform: scale3d(1, 1, 1);
  45. } */
  46. }
  47. @keyframes pulse {
  48. from {
  49.   -webkit-transform: scale3d(1, 1, 1);
  50.   transform: scale3d(1, 1, 1);
  51. }
  52. to {
  53.   -webkit-transform: scale3d(1.05, 1.05, 1.05);
  54.   transform: scale3d(1.05, 1.05, 1.05);
  55. }
  56. /* to {
  57.   -webkit-transform: scale3d(1, 1, 1);
  58.   transform: scale3d(1, 1, 1);
  59. } */
  60. }
  61. .pulse {
  62. -webkit-animation-name: pulse;
  63. animation-name: pulse;
  64. }
  65. .animate1 {
  66. -webkit-animation-duration: 1s;
  67. animation-duration: 1s;
  68. -webkit-animation-fill-mode: both;
  69. animation-fill-mode: both;
  70. }
复制代码
到此这篇关于vue.js实现点击图标放大离开时缩小的代码的文章就介绍到这了,更多相干vue实现点击图标放大离开缩小内容请搜刮脚本之家从前的文章或继续欣赏下面的相干文章盼望大家以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作