1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
2 pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
3 q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
4 dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
5 thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
6 footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
7 mark, audio, video {
8 margin: 0;
9 padding: 0;
10 border: 0;
11 }
12
13 article, aside, details, figcaption, figure, footer, header, hgroup,
14 menu, nav, section {
15 display: block
16 }
17
18 body {
19 line-height: 1
20 }
21
22 ol, ul {
23 list-style: none
24 }
25
26 blockquote, q {
27 quotes: none
28 }
29
30 blockquote:before, blockquote:after, q:before, q:after {
31 content: '';
32 content: none
33 }
34
35 table {
36 border-collapse: collapse;
37 border-spacing: 0
38 }

reset.css

1 /* BODY {
2 background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%);
3 background: linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%);
4 -webkit-background-size: 1em 1em;
5 background-size: 1em 1em;
6 background-color: #000;
7 } */
8
9 .l-wrapper {
10 position: absolute;
11 width: 480px;
12 height: 300px;
13 top: 0;
14 right: 0;
15 bottom: 0;
16 left: 0;
17 margin: auto;
18 text-align: center;
19 }
20
21 svg {
22 height: 120px;
23 width: 120px;
24 margin: 0 2em 2em;
25 overflow: visible;
26 /* border: 1px solid red; */
27 }
28
29 .g-circles {
30 -webkit-transform: scale(0.9) translate(7px, 7px);
31 -ms-transform: scale(0.9) translate(7px, 7px);
32 transform: scale(0.9) translate(7px, 7px);
33 }
34
35 circle {
36 fill: dodgerblue;
37 fill-opacity: 0;
38 -webkit-animation: opacity 1.2s linear infinite;
39 animation: opacity 1.2s linear infinite;
40 }
41 circle:nth-child(12n + 1) {
42 -webkit-animation-delay: -0.1s;
43 animation-delay: -0.1s;
44 }
45 circle:nth-child(12n + 2) {
46 -webkit-animation-delay: -0.2s;
47 animation-delay: -0.2s;
48 }
49 circle:nth-child(12n + 3) {
50 -webkit-animation-delay: -0.3s;
51 animation-delay: -0.3s;
52 }
53 circle:nth-child(12n + 4) {
54 -webkit-animation-delay: -0.4s;
55 animation-delay: -0.4s;
56 }
57 circle:nth-child(12n + 5) {
58 -webkit-animation-delay: -0.5s;
59 animation-delay: -0.5s;
60 }
61 circle:nth-child(12n + 6) {
62 -webkit-animation-delay: -0.6s;
63 animation-delay: -0.6s;
64 }
65 circle:nth-child(12n + 7) {
66 -webkit-animation-delay: -0.7s;
67 animation-delay: -0.7s;
68 }
69 circle:nth-child(12n + 8) {
70 -webkit-animation-delay: -0.8s;
71 animation-delay: -0.8s;
72 }
73 circle:nth-child(12n + 9) {
74 -webkit-animation-delay: -0.9s;
75 animation-delay: -0.9s;
76 }
77 circle:nth-child(12n + 10) {
78 -webkit-animation-delay: -1s;
79 animation-delay: -1s;
80 }
81 circle:nth-child(12n + 11) {
82 -webkit-animation-delay: -1.1s;
83 animation-delay: -1.1s;
84 }
85 circle:nth-child(12n + 12) {
86 -webkit-animation-delay: -1.2s;
87 animation-delay: -1.2s;
88 }
89
90 .g-circles--v2 circle {
91 fill-opacity: 0;
92 stroke-opacity: 0;
93 stroke-width: 1;
94 stroke: yellowgreen;
95 -webkit-animation-name: opacity-stroke, colors, colors-stroke, transform-2;
96 animation-name: opacity-stroke, colors, colors-stroke, transform-2;
97 }
98
99 .g-circles--v3 circle {
100 fill-opacity: 1;
101 -webkit-animation-name: opacity, colors;
102 animation-name: opacity, colors;
103 }
104
105 .g-circles--v4 circle {
106 fill-opacity: 1;
107 fill: orange;
108 -webkit-transform-origin: 60px 60px;
109 -ms-transform-origin: 60px 60px;
110 transform-origin: 60px 60px;
111 -webkit-animation-name: opacity, colors-3, transform;
112 animation-name: opacity, colors-3, transform;
113 }
114
115 @-webkit-keyframes opacity {
116 3% {
117 fill-opacity: 1;
118 }
119
120 75% {
121 fill-opacity: 0;
122 }
123 }
124
125 @keyframes opacity {
126 3% {
127 fill-opacity: 1;
128 }
129
130 75% {
131 fill-opacity: 0;
132 }
133 }
134 @-webkit-keyframes opacity-stroke {
135 10% {
136 stroke-opacity: 1;
137 }
138
139 85% {
140 stroke-opacity: 0;
141 }
142 }
143 @keyframes opacity-stroke {
144 10% {
145 stroke-opacity: 1;
146 }
147
148 85% {
149 stroke-opacity: 0;
150 }
151 }
152 @-webkit-keyframes colors {
153 0% {
154 fill: yellowgreen;
155 }
156
157 10% {
158 fill: gold;
159 }
160
161 75% {
162 fill: crimson;
163 }
164 }
165 @keyframes colors {
166 0% {
167 fill: yellowgreen;
168 }
169
170 10% {
171 fill: gold;
172 }
173
174 75% {
175 fill: crimson;
176 }
177 }
178 @-webkit-keyframes colors-stroke {
179 0% {
180 stroke: yellowgreen;
181 }
182
183 10% {
184 stroke: gold;
185 }
186
187 75% {
188 stroke: crimson;
189 }
190 }
191 @keyframes colors-stroke {
192 0% {
193 stroke: yellowgreen;
194 }
195
196 10% {
197 stroke: gold;
198 }
199
200 75% {
201 stroke: crimson;
202 }
203 }
204 @-webkit-keyframes colors-2 {
205 0% {
206 fill: yellow;
207 }
208
209 50% {
210 fill: red;
211 }
212
213 65% {
214 fill: orangered;
215 }
216
217 95% {
218 fill: gold;
219 }
220 }
221 @keyframes colors-2 {
222 0% {
223 fill: yellow;
224 }
225
226 50% {
227 fill: red;
228 }
229
230 65% {
231 fill: orangered;
232 }
233
234 95% {
235 fill: gold;
236 }
237 }
238 @-webkit-keyframes colors-3 {
239 0% {
240 fill: yellowgreen;
241 }
242
243 50% {
244 fill: turquoise;
245 }
246
247 65% {
248 fill: yellow;
249 }
250
251 95% {
252 fill: orange;
253 }
254 }
255 @keyframes colors-3 {
256 0% {
257 fill: yellowgreen;
258 }
259
260 50% {
261 fill: turquoise;
262 }
263
264 65% {
265 fill: yellow;
266 }
267
268 95% {
269 fill: orange;
270 }
271 }
272 @-webkit-keyframes transform {
273 10% {
274 -webkit-transform: scale(0.75);
275 transform: scale(0.75);
276 }
277 }
278 @keyframes transform {
279 10% {
280 -webkit-transform: scale(0.75);
281 transform: scale(0.75);
282 }
283 }
284 @-webkit-keyframes transform-2 {
285 40% {
286 -webkit-transform: scale(0.85);
287 transform: scale(0.85);
288 }
289
290 60% {
291 stroke-width: 20;
292 }
293 }
294 @keyframes transform-2 {
295 40% {
296 -webkit-transform: scale(0.85);
297 transform: scale(0.85);
298 }
299
300 60% {
301 stroke-width: 20;
302 }
303 }

style.css

1
2 3 4 5 6 7 8 9