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