效果展示

制作步骤

拆分部件

首先，分析动画，根据需要，把原图拆分成多个部件，并用 PS 把添加动画后可能露出的部分填充完整

重新组合

在网页中将拆分的各个部分重新组合，通过position: absolute;定位,z-index调整各个部件的上下层级，还原原图

附加动效

使用transform-origin可设置动画原点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.head {
  z-index: 4;
  animation: 6s ease-in-out 0s infinite normal none running myMove;
}
.hand {
  z-index: 3;
  animation: 6s ease-in-out 0s infinite normal none running mySwing, 6s
      ease-in-out 0s infinite normal none running myMove;
}
.body {
  z-index: 2;
  animation: 6s ease-in-out 0s infinite normal none running myZoom;
}
@keyframes myZoom {
  0% {
    height: 100%;
  }
  50% {
    height: 94%;
  }
  100% {
    height: 100%;
  }
}
@keyframes myMove {
  0% {
    top: 0;
  }
  50% {
    top: 6%;
  }
  100% {
    top: 0;
  }
}
@keyframes mySwing {
  0% {
    top: 0;
  }
  50% {
    transform: rotate(-15deg);
  }
  100% {
    top: 0;
  }
}