1html {
2 height: 100%;
3
4 background-color: hsla(87,50%,50%,1);
5
6 background-image:
7 radial-gradient(
8 white 30%,
9 hsla(0,40%,100%,0) 35%
10 ),
11 radial-gradient(
12 white 30%,
13 hsla(0,40%,100%,0) 35%
14 ),
15 radial-gradient(
16 white 30%,
17 hsla(0,40%,100%,0) 35%
18 ),
19 radial-gradient(
20 white 30%,
21 hsla(0,40%,100%,0) 35%
22 ),
23 radial-gradient(
24 white 30%,
25 hsla(0,40%,100%,0) 35%
26 ),
27 radial-gradient(
28 white 30%,
29 hsla(0,40%,100%,0) 35%
30 ),
31 radial-gradient(
32 white 30%,
33 hsla(0,40%,100%,0) 35%
34 ),
35 radial-gradient(
36 white 30%,
37 hsla(0,40%,100%,0) 35%
38 );
39
40 background-position:
41 50% 50%,
42 50% 50%,
43 50% 50%,
44 50% 50%,
45 50% 50%,
46 50% 50%,
47 50% 50%,
48 50% 50%;
49 background-size: 1.5em 1.5em;
50 background-repeat: no-repeat;
51
52 animation: bloom 2.5s infinite;
53 }
54
55@keyframes bloom {
56 6.25% {
57 background-position:
58 50% calc(50% - 1.5em),
59 50% 50%,
60 50% 50%,
61 50% 50%,
62 50% 50%,
63 50% 50%,
64 50% 50%,
65 50% 50%;
66 }
67 12.5% {
68 background-position:
69 50% calc(50% - 1.5em),
70 calc(50% + 1em) calc(50% - 1em),
71 50% 50%,
72 50% 50%,
73 50% 50%,
74 50% 50%,
75 50% 50%,
76 50% 50%;
77 }
78 18.75% {
79 background-position:
80 50% calc(50% - 1.5em),
81 calc(50% + 1em) calc(50% - 1em),
82 calc(50% + 1.5em) 50%,
83 50% 50%,
84 50% 50%,
85 50% 50%,
86 50% 50%,
87 50% 50%;
88 }
89 25% {
90 background-position:
91 50% calc(50% - 1.5em),
92 calc(50% + 1em) calc(50% - 1em),
93 calc(50% + 1.5em) 50%,
94 calc(50% + 1em) calc(50% + 1em),
95 50% 50%,
96 50% 50%,
97 50% 50%,
98 50% 50%;
99 }
100 31.25% {
101 background-position:
102 50% calc(50% - 1.5em),
103 calc(50% + 1em) calc(50% - 1em),
104 calc(50% + 1.5em) 50%,
105 calc(50% + 1em) calc(50% + 1em),
106 50% calc(50% + 1.5em),
107 50% 50%,
108 50% 50%,
109 50% 50%;
110 }
111 37.5% {
112 background-position:
113 50% calc(50% - 1.5em),
114 calc(50% + 1em) calc(50% - 1em),
115 calc(50% + 1.5em) 50%,
116 calc(50% + 1em) calc(50% + 1em),
117 50% calc(50% + 1.5em),
118 calc(50% - 1em) calc(50% + 1em),
119 50% 50%,
120 50% 50%;
121 }
122 43.75% {
123 background-position:
124 50% calc(50% - 1.5em),
125 calc(50% + 1em) calc(50% - 1em),
126 calc(50% + 1.5em) 50%,
127 calc(50% + 1em) calc(50% + 1em),
128 50% calc(50% + 1.5em),
129 calc(50% - 1em) calc(50% + 1em),
130 calc(50% - 1.5em) 50%,
131 50% 50%;
132 }
133 50% {
134 background-position:
135 50% 50%,
136 calc(50% + 1em) calc(50% - 1em),
137 calc(50% + 1.5em) 50%,
138 calc(50% + 1em) calc(50% + 1em),
139 50% calc(50% + 1.5em),
140 calc(50% - 1em) calc(50% + 1em),
141 calc(50% - 1.5em) 50%,
142 calc(50% - 1em) calc(50% - 1em);
143 }
144 56.25% {
145 background-position:
146 50% 50%,
147 50% 50%,
148 calc(50% + 1.5em) 50%,
149 calc(50% + 1em) calc(50% + 1em),
150 50% calc(50% + 1.5em),
151 calc(50% - 1em) calc(50% + 1em),
152 calc(50% - 1.5em) 50%,
153 calc(50% - 1em) calc(50% - 1em);
154 }
155 62.5% {
156 background-position:
157 50% 50%,
158 50% 50%,
159 50% 50%,
160 calc(50% + 1em) calc(50% + 1em),
161 50% calc(50% + 1.5em),
162 calc(50% - 1em) calc(50% + 1em),
163 calc(50% - 1.5em) 50%,
164 calc(50% - 1em) calc(50% - 1em);
165 }
166 68.75% {
167 background-position:
168 50% 50%,
169 50% 50%,
170 50% 50%,
171 50% 50%,
172 50% calc(50% + 1.5em),
173 calc(50% - 1em) calc(50% + 1em),
174 calc(50% - 1.5em) 50%,
175 calc(50% - 1em) calc(50% - 1em);
176 }
177 75% {
178 background-position:
179 50% 50%,
180 50% 50%,
181 50% 50%,
182 50% 50%,
183 50% 50%,
184 calc(50% - 1em) calc(50% + 1em),
185 calc(50% - 1.5em) 50%,
186 calc(50% - 1em) calc(50% - 1em);
187 }
188 81.25% {
189 background-position:
190 50% 50%,
191 50% 50%,
192 50% 50%,
193 50% 50%,
194 50% 50%,
195 50% 50%,
196 calc(50% - 1.5em) 50%,
197 calc(50% - 1em) calc(50% - 1em);
198 }
199 87.5% {
200 background-position:
201 50% 50%,
202 50% 50%,
203 50% 50%,
204 50% 50%,
205 50% 50%,
206 50% 50%,
207 50% 50%,
208 calc(50% - 1em) calc(50% - 1em);
209 }
210 }