1@keyframes clockwise {
2  0% {
3    transform: rotate(0deg);
4  }
5
6  100% {
7    transform: rotate(360deg);
8  }
9}
10
11@keyframes counter-clockwise {
12  0% {
13    transform: rotate(0deg);
14  }
15
16  100% {
17    transform: rotate(-360deg);
18  }
19}
20
21.gearbox {
22  background: #111;
23  height: 150px;
24  width: 200px;
25  position: relative;
26  border: none;
27  overflow: hidden;
28  border-radius: 6px;
29  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
30}
31
32.gearbox .overlay {
33  border-radius: 6px;
34  content: "";
35  position: absolute;
36  top: 0;
37  left: 0;
38  width: 100%;
39  height: 100%;
40  z-index: 10;
41  box-shadow: inset 0px 0px 20px black;
42  transition: background 0.2s;
43}
44
45.gearbox .overlay {
46  background: transparent;
47}
48
49.gear {
50  position: absolute;
51  height: 60px;
52  width: 60px;
53  box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
54  border-radius: 30px;
55}
56
57.gear.large {
58  height: 120px;
59  width: 120px;
60  border-radius: 60px;
61}
62
63.gear.large:after {
64  height: 96px;
65  width: 96px;
66  border-radius: 48px;
67  margin-left: -48px;
68  margin-top: -48px;
69}
70
71.gear.one {
72  top: 12px;
73  left: 10px;
74}
75
76.gear.two {
77  top: 61px;
78  left: 60px;
79}
80
81.gear.three {
82  top: 110px;
83  left: 10px;
84}
85
86.gear.four {
87  top: 13px;
88  left: 128px;
89}
90
91.gear:after {
92  content: "";
93  position: absolute;
94  height: 36px;
95  width: 36px;
96  border-radius: 36px;
97  background: #111;
98  top: 50%;
99  left: 50%;
100  margin-left: -18px;
101  margin-top: -18px;
102  z-index: 3;
103  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888;
104}
105
106.gear-inner {
107  position: relative;
108  height: 100%;
109  width: 100%;
110  background: #555;
111  border-radius: 30px;
112  border: 1px solid rgba(255, 255, 255, 0.1);
113}
114
115.large .gear-inner {
116  border-radius: 60px;
117}
118
119.gear.one .gear-inner {
120  animation: counter-clockwise 3s infinite linear;
121}
122
123.gear.two .gear-inner {
124  animation: clockwise 3s infinite linear;
125}
126
127.gear.three .gear-inner {
128  animation: counter-clockwise 3s infinite linear;
129}
130
131.gear.four .gear-inner {
132  animation: counter-clockwise 6s infinite linear;
133}
134
135.gear-inner .bar {
136  background: #555;
137  height: 16px;
138  width: 76px;
139  position: absolute;
140  left: 50%;
141  margin-left: -38px;
142  top: 50%;
143  margin-top: -8px;
144  border-radius: 2px;
145  border-left: 1px solid rgba(255, 255, 255, 0.1);
146  border-right: 1px solid rgba(255, 255, 255, 0.1);
147}
148
149.large .gear-inner .bar {
150  margin-left: -68px;
151  width: 136px;
152}
153
154.gear-inner .bar:nth-child(2) {
155  transform: rotate(60deg);
156}
157
158.gear-inner .bar:nth-child(3) {
159  transform: rotate(120deg);
160}
161
162.gear-inner .bar:nth-child(4) {
163  transform: rotate(90deg);
164}
165
166.gear-inner .bar:nth-child(5) {
167  transform: rotate(30deg);
168}
169
170.gear-inner .bar:nth-child(6) {
171  transform: rotate(150deg);
172}