一阵劲爆的电橘他

喜欢这个表情哩，但是静态图，怎么够劲爆？！那就给它来点动画~

首先需要先把橘猫抠图抠下来，再准备个炮火和圆环的图片。以表情包原图作为背景图，使用绝对定位将素材进行摆放，记得加上z-index来控制图片的层级。

1
2
3
4
5
6
7
<div class="bg">
        <img class="ju" src="./images/cat.png"  />
        <img class="huan-1" src="./images/huan.png" />
        <img class="huan-2" src="./images/huan.png" />
        <img class="huan-3" src="./images/huan.png" />
        <img class="fire" src="./images/fire.png" />
</div>

定位好之后，逐一添加动画效果。射击是向左的，所有素材均做向左来回运动。圆环和炮火加上透明度的变化，同时注意各动画的时间设置，让整体动作更流畅些。具体样式及动画如下：

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<style>
  .bg {
    width: 400px;
    height: 400px;
    position: relative;
    background: url('./images/bg.png');
    background-size: 100% 100%;
  }
 
  .bg .ju {
    z-index: 5;
    width: 260px;
    height: 285px;
    position: absolute;
    top: 45px;
    left: 68px;
    opacity: 1;
    animation: JU 0.2s linear infinite;
  }
 
  .bg .huan-1 {
    z-index: 10;
    position: absolute;
    top: 80px;
    left: 250px;
    height: 130px;
    animation: Huan1 0.2s linear infinite;
  }
 
  .bg .huan-2 {
    z-index: 10;
    position: absolute;
    top: 75px;
    left: 250px;
    height: 150px;
    animation: Huan2 0.4s linear infinite;
  }
 
  .bg .huan-3 {
    z-index: 10;
    position: absolute;
    top: 70px;
    left: 250px;
    height: 180px;
    animation: Huan3 0.5s linear infinite;
  }
 
  .bg .fire{
    z-index: 1;
    position: absolute;
    top: -0px;
    left: -80px;
    width: 280px;
    transform: rotate(-15deg);
    animation: Fire 0.2s linear infinite;
  }
 
  @keyframes JU {
    0% {
      transform: translateX(0);
    }
 
    50%{
      transform: translateX(30px);
    }
 
    100% {
      transform: translateX(0);
    }
  }
 
  @keyframes Huan1{
    0%{
      opacity: 0;
      transform: translateX(0px);
    }
    30%{
      opacity: 0.3;
      transform: translateX(-20px);
    }
    60%{
      opacity: 0.3;
    }
    100%{
      opacity: 0;
      transform: translateX(-60px);
    }
  }
 
  @keyframes Huan2{
    0%{
      opacity: 0;
      transform: translateX(0px);
    }
    30%{
      opacity: 0.45;
      transform: translateX(-60px);
    }
    60%{
      opacity: 0.45;
    }
    100%{
      opacity: 0;
      transform: translateX(-160px);
    }
  }
 
  @keyframes Huan3{
    0%{
      opacity: 0;
      transform: translateX(0px);
    }
    30%{
      opacity: 0.35;
      transform: translateX(-140px);
    }
    60%{
      opacity: 0.35;
    }
    100%{
      opacity: 0;
      transform: translateX(-200px);
    }
  }
 
  @keyframes Fire{
    0%{
      opacity: 0.1;
      transform: translateX(0px);
    }
    30%{
      opacity: 0.3;
      transform: translateX(-10px);
    }
    100%{
      opacity: 1;
      transform: translateX(-30px);
    }
</style>

最终效果，对味了

bing