如何在png中创建握手效果？答案

【问题标题】：How to create a hand shake effect in png?如何在png中创建握手效果？
【发布时间】：2017-07-15 02:37:47
【问题描述】：

我有一个 png，我希望在其中握手。我正在提供图片的链接：

请更喜欢使用 CSS、JS、HTML 和 jquery 来这样做：

http://i.stack.imgur.com/0YmwS.png

【问题讨论】：

dropbox.com/s/pr1umzowf7m2c4l/logo.png?dl=0
以上链接是png文件谢谢！
感谢 tuult 解决方案我将如何为图像制作动画以握手？

标签： javascript jquery html css

【解决方案1】：

css足以实现抖动效果：

.handshake:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d( 0, -1px, 0);
  }

  20%, 80% {
    transform: translate3d(0, 2px, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(0, -4px, 0);
  }

  40%, 60% {
    transform: translate3d(0, 4px, 0);
  }
}

但要使其逼真，您需要对图像本身的元素进行动画处理。您可以使用 Adobe Animate（以前的 Flash）之类的程序来导出动画 gif（顺便说一句，它看起来更丑陋，并且比 flash 的主要导出格式 swf 占用更多空间）。

【讨论】：

那么最好的元素动画你能把png文件动画它吗！
请给我更多建议，我需要这个！
大家好，请提供解决方案，我需要尽快解决这个问题！
感谢 tuult 解决方案我将如何为图像制作动画以握手？
嘿，对不起，我被AFK了……也许这个问题应该转移到平面设计中，因为它不再与编程相关。无论如何...您是否尝试将上面的代码应用于图像？你觉得这部动画怎么样？如果您能够将图像分成 2 层（或 4 层），则可以让背景保持静止并仅在手上应用动作。（甚至可能在上臂和下臂上）