1.planet {
2  display: block;
3  width: 125px;
4  height: 125px;
5  position: relative;
6  transform-style: preserve-3d;
7  border-radius: 50%;
8  background: #fcc96b;
9  background: #fcc96b;
10  background: linear-gradient(
11    180deg,
12    #fcc96b 0%,
13    #fcc96b 15%,
14    #f7ae01 15%,
15    #f7ae01 19%,
16    #fcc96b 19%,
17    #fcc96b 22%,
18    #f7ae01 22%,
19    #f7ae01 28%,
20    #fcc96b 28%,
21    #fcc96b 31%,
22    #fcc96b 33%,
23    #fcc96b 36%,
24    #f7ae01 36%,
25    #f7ae01 48%,
26    #fcc96b 48%,
27    #fcc96b 55%,
28    #f7ae01 55%,
29    #f7ae01 66%,
30    #fcc96b 66%,
31    #fcc96b 70%,
32    #f7ae01 70%,
33    #f7ae01 73%,
34    #fcc96b 73%,
35    #fcc96b 82%,
36    #f7ae01 82%,
37    #c7ba9d 86%,
38    #fcc96b 86%
39  );
40  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25),
41    inset 8px -4px 6px rgba(199, 128, 0, 0.5),
42    inset -8px 4px 8px rgba(255, 235, 199, 0.5), inset 20px -5px 12px #f7ae01,
43    0 0 100px #ffffff59;
44  transform: rotateZ(-15deg);
45}
46
47.planet::before {
48  position: absolute;
49  content: "";
50  display: block;
51  width: 100%;
52  height: 100%;
53  box-sizing: border-box;
54  border: 16px solid #e1a519;
55  border-top-width: 0;
56  border-radius: 50%;
57  box-shadow: 0 -2px 0 #c18620;
58  animation: rings1 0.8s infinite linear;
59}
60
61.planet::after {
62  position: absolute;
63  content: "";
64  display: block;
65  width: 100%;
66  height: 100%;
67  box-sizing: border-box;
68  border: 8px solid #d48b0c;
69  border-top-width: 0;
70  border-radius: 50%;
71  box-shadow: 0 -2px 0 #b99309;
72  animation: rings2 0.8s infinite linear;
73}
74
75@keyframes rings1 {
76  0% {
77    transform: rotateX(65deg) rotateZ(0deg) scale(1.75);
78  }
79
80  100% {
81    transform: rotateX(65deg) rotateZ(360deg) scale(1.75);
82  }
83}
84
85@keyframes rings2 {
86  0% {
87    transform: rotateX(65deg) rotateZ(0deg) scale(1.7);
88  }
89
90  100% {
91    transform: rotateX(65deg) rotateZ(360deg) scale(1.7);
92  }
93}