1body {
2 background: #262626;
3}
4body:before {
5 position: absolute;
6 top: 50%;
7 left: 50%;
8 margin: -1.5em;
9 width: 3em;
10 height: 3em;
11 background: #dcdcd2;
12 color: #dcdcd2;
13 animation: rot 8s cubic-bezier(.2,.6,.4,1) infinite, adder 8s cubic-bezier(.2,.6,.4,1) infinite;
14 content: '';
15}
16body:after {
17 position: absolute;
18 top: calc(50% - 12.5em);
19 left: calc(50% - 12.5em);
20 width: 25em;
21 height: 25em;
22 box-shadow: 0 0 0 100em #222;
23 content: '';
24}
25
26@keyframes rot {
27 0%, 5% {
28 transform: rotate(0deg) scale(1);
29 }
30 10%, 15% {
31 transform: rotate(-90deg) scale(1);
32 }
33 20%, 25% {
34 transform: rotate(-180deg) scale(1);
35 }
36 30%, 35% {
37 transform: rotate(-270deg) scale(1);
38 }
39 40%, 45% {
40 transform: rotate(-360deg) scale(1);
41 }
42 50%, 55% {
43 transform: rotate(-450deg) scale(1);
44 }
45 60%, 65% {
46 transform: rotate(-540deg) scale(1);
47 }
48 70%, 75% {
49 transform: rotate(-630deg) scale(1);
50 }
51 80%, 85% {
52 transform: rotate(-720deg) scale(1);
53 }
54 90% {
55 filter: blur(.25em);
56 }
57 100% {
58 transform: rotate(-2160deg) scale(.333);
59 }
60}
61
62@keyframes adder {
63 0%, 100% {
64 box-shadow: 20.17767025742713em -1.5em #dcdcd2, 17.67766952966369em 17.677669529663685em #dcdcd2, -1.5em 20.17767025742713em #dcdcd2, -20.17767025742713em 17.67766952966369em #dcdcd2, -23.677669529663685em -1.5em #dcdcd2, -20.17767025742713em -20.17767025742713em #dcdcd2, -1.5em -23.677669529663685em #dcdcd2, 17.677669529663685em -20.17767025742713em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
65 }
66 5%, 10% {
67 box-shadow: 3em -1.5em #dcdcd2, 17.67766952966369em 17.677669529663685em #dcdcd2, -1.5em 20.17767025742713em #dcdcd2, -20.17767025742713em 17.67766952966369em #dcdcd2, -23.677669529663685em -1.5em #dcdcd2, -20.17767025742713em -20.17767025742713em #dcdcd2, -1.5em -23.677669529663685em #dcdcd2, 17.677669529663685em -20.17767025742713em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
68 }
69 15%, 20% {
70 box-shadow: 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, -1.5em 20.17767025742713em #dcdcd2, -20.17767025742713em 17.67766952966369em #dcdcd2, -23.677669529663685em -1.5em #dcdcd2, -20.17767025742713em -20.17767025742713em #dcdcd2, -1.5em -23.677669529663685em #dcdcd2, 17.677669529663685em -20.17767025742713em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
71 }
72 25%, 30% {
73 box-shadow: 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, -3em 3em #dcdcd2, -20.17767025742713em 17.67766952966369em #dcdcd2, -23.677669529663685em -1.5em #dcdcd2, -20.17767025742713em -20.17767025742713em #dcdcd2, -1.5em -23.677669529663685em #dcdcd2, 17.677669529663685em -20.17767025742713em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
74 }
75 35%, 40% {
76 box-shadow: 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, -3em 3em #dcdcd2, -3em -1.5em #dcdcd2, -23.677669529663685em -1.5em #dcdcd2, -20.17767025742713em -20.17767025742713em #dcdcd2, -1.5em -23.677669529663685em #dcdcd2, 17.677669529663685em -20.17767025742713em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
77 }
78 45%, 50% {
79 box-shadow: 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, -3em 3em #dcdcd2, -3em -1.5em #dcdcd2, -3em -3em #dcdcd2, -20.17767025742713em -20.17767025742713em #dcdcd2, -1.5em -23.677669529663685em #dcdcd2, 17.677669529663685em -20.17767025742713em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
80 }
81 55%, 60% {
82 box-shadow: 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, -3em 3em #dcdcd2, -3em -1.5em #dcdcd2, -3em -3em #dcdcd2, 3em -3em #dcdcd2, -1.5em -23.677669529663685em #dcdcd2, 17.677669529663685em -20.17767025742713em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
83 }
84 65%, 70% {
85 box-shadow: 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, -3em 3em #dcdcd2, -3em -1.5em #dcdcd2, -3em -3em #dcdcd2, 3em -3em #dcdcd2, 3em -1.5em #dcdcd2, 17.677669529663685em -20.17767025742713em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
86 }
87 75%, 80% {
88 box-shadow: 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, -3em 3em #dcdcd2, -3em -1.5em #dcdcd2, -3em -3em #dcdcd2, 3em -3em #dcdcd2, 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, 20.17767025742713em -1.5em #dcdcd2;
89 }
90 85%, 90% {
91 box-shadow: 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, -3em 3em #dcdcd2, -3em -1.5em #dcdcd2, -3em -3em #dcdcd2, 3em -3em #dcdcd2, 3em -1.5em #dcdcd2, 3em 3em #dcdcd2, 3em -1.5em #dcdcd2;
92 }
93}