1html {
2 height: 100%;
3 font-size: 16px;
4 background-color: hsla(0,0%,30%,1);
5
6 background-image:
7 linear-gradient(
8 white,
9 #666 2%,
10 #888 50%,
11 hsla(0,30%,40%,1) 50%,
12 #444 98%,
13 #222
14 ),
15 linear-gradient(
16 white,
17 #666 2%,
18 #888 50%,
19 hsla(0,25%,40%,1) 50%,
20 #444 98%,
21 #222
22 ),
23 linear-gradient(
24 white,
25 #666 2%,
26 #888 50%,
27 hsla(0,20%,40%,1) 50%,
28 #444 98%,
29 #222
30 ),
31 linear-gradient(
32 white,
33 #666 2%,
34 #888 50%,
35 hsla(0,15%,40%,1) 50%,
36 #444 98%,
37 #222
38 ),
39 linear-gradient(
40 white,
41 #666 2%,
42 #888 50%,
43 hsla(0,10%,40%,1) 50%,
44 #444 98%,
45 #222
46 );
47
48 background-size:
49 1em 2.8em,
50 1em 2.8em,
51 1em 2.8em,
52 1em 2.8em,
53 1em 2.8em;
54 background-position:
55 calc(50% - 2em) 50%,
56 calc(50% - 1em) 50%,
57 50% 50%,
58 calc(50% + 1em) 50%,
59 calc(50% + 2em) 50%;
60 background-repeat: no-repeat;
61
62 animation: wave 1s linear infinite;
63 }
64
65@keyframes wave {
66 14.3% {
67 background-size:
68 2em 3.8em,
69 1.5em 3em,
70 1em 2.8em,
71 1em 2.8em,
72 1em 2.8em;
73 }
74 28.6% {
75 background-size:
76 1.5em 3em,
77 2em 3.8em,
78 1.5em 3em,
79 1em 2.8em,
80 1em 2.8em;
81 }
82 42.9% {
83 background-size:
84 1em 2.8em,
85 1.5em 3em,
86 2em 3.8em,
87 1.5em 3em,
88 1em 2.8em;
89 }
90 57.2% {
91 background-size:
92 1em 2.8em,
93 1em 2.8em,
94 1.5em 3em,
95 2em 3.8em,
96 1.5em 3em;
97 }
98 71.5% {
99 background-size:
100 1em 2.8em,
101 1em 2.8em,
102 1em 2.8em,
103 1.5em 3em,
104 2em 3.8em;
105 }
106 }