1.piggy-wrapper {
2  position: relative;
3  width: 350px;
4  height: 350px;
5  display: block;
6  margin: 0 auto;
7  margin-top: 0px;
8}
9
10.piggy-wrap {
11  position: absolute;
12  top: 0;
13  left: 0;
14  z-index: 10;
15  width: 100%;
16  height: 100%;
17  transform-origin: bottom center;
18  animation: trembling 5s linear infinite;
19}
20
21@keyframes trembling {
22  0% {
23    transform: scale(1);
24  }
25
26  19% {
27    transform: scale(1);
28  }
29
30  21% {
31    transform: scale(0.99);
32  }
33
34  22% {
35    transform: scale(1);
36  }
37
38  23% {
39    transform: scale(0.99);
40  }
41
42  24% {
43    transform: scale(1);
44  }
45
46  25% {
47    transform: scale(0.99);
48  }
49
50  26% {
51    transform: scale(1);
52  }
53
54  25% {
55    transform: scale(0.99);
56  }
57
58  26% {
59    transform: scale(1);
60  }
61
62  27% {
63    transform: scale(0.99);
64  }
65
66  28% {
67    transform: scale(1);
68  }
69
70  29% {
71    transform: scale(0.99);
72  }
73
74  30% {
75    transform: scale(1);
76  }
77
78  60% {
79    transform: scale(0.95);
80  }
81
82  61% {
83    transform: scale(1);
84  }
85
86  100% {
87    transform: scale(1);
88  }
89}
90
91.piggy {
92  position: absolute;
93  bottom: 40px;
94  left: 50%;
95  margin-left: -160px;
96  width: 270px;
97  height: 200px;
98  display: block;
99  border-radius: 100px;
100  background-color: #d88fa0;
101}
102
103.nose {
104  position: absolute;
105  top: 80px;
106  left: -25px;
107  width: 40px;
108  height: 60px;
109  display: block;
110  background-color: #d88fa0;
111  z-index: 1;
112  border-radius: 4px;
113}
114
115.mouth {
116  position: absolute;
117  top: 95px;
118  left: -15px;
119  width: 0;
120  height: 0;
121  z-index: 8;
122  display: block;
123  border-bottom: 60px solid #d88fa0;
124  border-left: 20px solid transparent;
125  border-right: 20px solid transparent;
126  border-radius: 4px;
127}
128
129.ear {
130  position: absolute;
131  top: -35px;
132  left: 70px;
133  width: 45px;
134  height: 40px;
135  display: block;
136  border-top-right-radius: 60px;
137  background-color: #d88fa0;
138  z-index: 1;
139}
140
141.piggy:before {
142  position: absolute;
143  content: '';
144  top: -25px;
145  left: 55px;
146  width: 60px;
147  height: 60px;
148  display: block;
149  border-top-right-radius: 60px;
150  background-color: #cb6980;
151  z-index: -1;
152}
153
154.tail {
155  position: absolute;
156  left: 254px;
157  top: 125px;
158}
159
160.tail span {
161  position: absolute;
162  left: 0;
163  top: 0;
164  width: 20px;
165  height: 5px;
166  transform: rotate(30deg);
167  background-color: #d88fa0;
168}
169
170.tail span:nth-child(2) {
171  left: 3px;
172  top: -38px;
173  width: 50px;
174  height: 50px;
175  transform: rotate(-20deg);
176  background-color: transparent;
177  border-radius: 50%;
178  border-width: 5px;
179  border-style: solid;
180  border-color: transparent #d88fa0 #d88fa0 transparent;
181}
182
183.tail span:nth-child(3) {
184  left: 22px;
185  top: -36px;
186  width: 30px;
187  height: 30px;
188  transform: rotate(-40deg);
189  background-color: transparent;
190  border-radius: 50%;
191  border-width: 5px;
192  border-style: solid;
193  border-color: #d88fa0 transparent transparent #d88fa0;
194}
195
196.tail span:nth-child(4) {
197  left: 7px;
198  top: -66px;
199  width: 60px;
200  height: 60px;
201  transform: rotate(-40deg);
202  background-color: transparent;
203  border-radius: 50%;
204  border-width: 5px;
205  border-style: solid;
206  border-color: transparent transparent #d88fa0 transparent;
207}
208
209.eye {
210  position: absolute;
211  left: 35px;
212  top: 75px;
213  width: 30px;
214  height: 30px;
215  transform: rotate(45deg);
216  border-radius: 50%;
217  border-width: 4px;
218  border-style: solid;
219  border-color: #555 transparent transparent #555;
220  animation: blink 5s linear infinite;
221}
222
223@keyframes blink {
224  0% {
225    border-color: #555 transparent transparent #555;
226  }
227
228  19% {
229    border-color: #555 transparent transparent #555;
230  }
231
232  20% {
233    border-color: transparent #555 #555 transparent;
234  }
235
236  60% {
237    border-color: transparent #555 #555 transparent;
238  }
239
240  61% {
241    border-color: #555 transparent transparent #555;
242  }
243
244  100% {
245    border-color: #555 transparent transparent #555;
246  }
247}
248
249.hole {
250  position: absolute;
251  left: 121px;
252  top: 0;
253  width: 60px;
254  height: 5px;
255  background-color: #555;
256  border-bottom-left-radius: 5px;
257  border-bottom-right-radius: 5px;
258}
259
260.coin-wrap {
261  position: absolute;
262  top: 0;
263  left: -8px;
264  z-index: 9;
265  width: 100%;
266  height: 100%;
267  opacity: 0;
268  transform-origin: bottom center;
269  animation: trembling 5s linear infinite, moveCoin 5s linear infinite;
270}
271
272.coin {
273  position: absolute;
274  top: 110px;
275  left: 143px;
276  z-index: 9;
277  width: 61.5px;
278  height: 61.5px;
279  border-radius: 50%;
280  border: 6px solid #e67e22;
281  background-color: #f39c12;
282  text-align: center;
283  line-height: 68px;
284  font-size: 45px;
285  font-weight: 500;
286  color: rgba(32,32,32,0.5);
287  box-shadow: inset 0 0 4px #777;
288}
289
290@keyframes moveCoin {
291  0% {
292    opacity: 0;
293    top: 0;
294  }
295
296  19% {
297    opacity: 1;
298    top: 0;
299  }
300
301  21% {
302    top: -7px;
303  }
304
305  22% {
306    top: -7px;
307  }
308
309  23% {
310    top: -14px;
311  }
312
313  24% {
314    top: -14px;
315  }
316
317  25% {
318    top: -21px;
319  }
320
321  26% {
322    top: -21px;
323  }
324
325  27% {
326    top: -28px;
327  }
328
329  28% {
330    top: -28px;
331  }
332
333  29% {
334    top: -35px;
335  }
336
337  30% {
338    top: -35px;
339  }
340
341  60% {
342    top: -35px;
343  }
344
345  66% {
346    top: -220px;
347    opacity: 1;
348  }
349
350  67% {
351    top: -220px;
352    opacity: 0;
353  }
354
355  99% {
356    top: 0;
357    opacity: 0;
358  }
359
360  100% {
361    opacity: 0;
362    top: 0;
363  }
364}
365
366.legs {
367  position: absolute;
368  bottom: 14px;
369  left: 96px;
370  width: 40px;
371  height: 60px;
372  display: block;
373  background-color: #cb6980;
374  border-radius: 3px;
375  z-index: 1;
376}
377
378.legs:after {
379  position: absolute;
380  content: '';
381  bottom: 0;
382  left: 0;
383  width: 30px;
384  height: 12px;
385  display: block;
386  background-color: #d88fa0;
387  border-bottom-left-radius: 3px;
388  border-top-right-radius: 3px;
389  z-index: 1;
390}
391
392.legs.back {
393  left: 206px;
394}