1html {
2 height: 100%;
3
4 background-color: hsla(10,40%,50%,1);
5
6 background-image:
7 radial-gradient(
8 hsla(50,80%,80%,1) 30%,
9 transparent 35%
10 ),
11 radial-gradient(
12 hsla(0,0%,0%,.1),
13 transparent 35%
14 );
15
16 background-position: 50% 50%, 50% calc(50% + .3em);
17 background-size: 2em 2em, 3em 1em;
18 background-repeat: no-repeat;
19
20 animation: bounce 1s infinite;
21 }
22
23@keyframes bounce {
24 0% {
25 background-position: 50% calc(50% - 4em), 50% calc(50% + .4em);
26 background-size: 2em 2em, 1em 1em;
27 }
28 40% {
29 background-position: 50% 50%, 50% calc(50% + .3em);
30 background-size: 2em 2em, 3em 1em;
31 }
32 45% {
33 background-position: 50% 50%, 50% calc(50% + .3em);
34 background-size: 2em 1.5em, 3em 1em;
35 }
36 50% {
37 background-position: 50% 50%, 50% calc(50% + .3em);
38 background-size: 2em 1em, 3em 1em;
39 }
40 100% {
41 background-position: 50% calc(50% - 4em), 50% calc(50% + .3em);
42 background-size: 2em 2em, 1em 1em;
43 }
44 }