1html {
2 height: 100%;
3 font-size: 1em;
4 background-color: #222;
5 background-image:
6 radial-gradient(
7 hsla(0,0%,100%,.6) 40%,
8 hsla(0,0%,100%,0) 60%
9 ),
10 radial-gradient(
11 hsla(0,0%,100%,.6) 40%,
12 hsla(0,0%,100%,0) 60%
13 ),
14 radial-gradient(
15 hsla(0,0%,100%,.6) 40%,
16 hsla(0,0%,100%,0) 60%
17 ),
18 radial-gradient(
19 white 50%,
20 hsla(0,0%,100%,0) 53%
21 ),
22 radial-gradient(
23 white 50%,
24 hsla(0,0%,100%,0) 53%
25 ),
26 radial-gradient(
27 white 50%,
28 hsla(0,0%,100%,0) 53%
29 ),
30 radial-gradient(
31 white 50%,
32 hsla(0,0%,100%,0) 53%
33 ),
34 radial-gradient(
35 hsla(0,0%,100%,.6) 40%,
36 hsla(0,0%,100%,0) 60%
37 ),
38
39 radial-gradient(
40 hsl(200,80%,60%),
41 hsl(60,0%,20%)
42 );
43 background-position:
44 50% 50%,
45 calc(50% + 3em) calc(50% - .5em),
46 calc(50% + 4em) calc(50% - 1.5em),
47 calc(50% + 3em) calc(50% - 2.5em),
48 50% calc(50% - 3em),
49 calc(50% - 3em) calc(50% - 2.5em),
50 calc(50% - 4em) calc(50% - 1.5em),
51 calc(50% - 3em) calc(50% - .5em),
52
53 0 0;
54 background-size:
55 3em 3em,
56 2.5em 3em,
57 1em 3em,
58 2.5em 3em,
59 3em 3em,
60 2.5em 3em,
61 1em 3em,
62 2.5em 3em,
63
64 100% 100%;
65 background-repeat: no-repeat;
66 animation: .3s ring linear infinite reverse;
67 }
68
69
70@keyframes ring {
71 0% {
72 background-position:
73 50% 50%,
74 calc(50% + 3em) calc(50% - .5em),
75 calc(50% + 4em) calc(50% - 1.5em),
76 calc(50% + 3em) calc(50% - 2.5em),
77 50% calc(50% - 3em),
78 calc(50% - 3em) calc(50% - 2.5em),
79 calc(50% - 4em) calc(50% - 1.5em),
80 calc(50% - 3em) calc(50% - .5em),
81
82 0 0;
83 background-size:
84 3em 3em,
85 2.5em 3em,
86 1em 3em,
87 2.5em 3em,
88 3em 3em,
89 2.5em 3em,
90 1em 3em,
91 2.5em 3em,
92
93 100% 100%;
94 }
95 100% {
96 background-position:
97 calc(50% - 3em) calc(50% - .5em),
98 50% 50%,
99 calc(50% + 3em) calc(50% - .5em),
100 calc(50% + 4em) calc(50% - 1.5em),
101 calc(50% + 3em) calc(50% - 2.5em),
102 50% calc(50% - 3em),
103 calc(50% - 3em) calc(50% - 2.5em),
104 calc(50% - 4em) calc(50% - 1.5em),
105
106 0 0;
107 background-size:
108 2.5em 3em,
109 3em 3em,
110 2.5em 3em,
111 1em 3em,
112 2.5em 3em,
113 3em 3em,
114 2.5em 3em,
115 1em 3em,
116
117 100% 100%;
118 }
119 }
120
121
122
123
124
125
126
127