Recommendation
More Effects...
JS
1
 
 
CSS
1
*,
2
*:before,
3
*:after {
4
  -webkit-box-sizing: border-box;
5
  -moz-box-sizing: border-box;
6
  -ms-box-sizing: border-box;
7
  box-sizing: border-box;
8
}
9
body {
10
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.02) 75%, transparent 75%, transparent 100%);
11
  background-size: 10px 10px;
12
  background-color: #d68d2f;
13
  padding-top: 50px;
14
}
15
.halo {
16
  position: absolute;
17
  top: 50%;
18
  left: 50%;
19
}
20
.halo:before,
21
.halo:after {
22
  content: '';
23
  display: block;
24
  position: absolute;
25
  width: 240px;
26
  height: 240px;
27
  left: -120px;
28
  top: -120px;
29
  border-radius: 240px;
30
  animation-name: Grow;
31
  animation-duration: 10s;
32
  animation-iteration-count: infinite;
33
  animation-timing-function: linear;
34
  -webkit-animation-name: Grow;
35
  -webkit-animation-duration: 10s;
36
  -webkit-animation-iteration-count: infinite;
37
  -webkit-animation-timing-function: linear;
38
}
39
.halo:before {
40
  box-shadow: 0px 0px 100px 10px rgba(150, 42, 0, 0.8);
41
}
42
.halo:after {
43
  box-shadow: inset 0px 0px 100px 10px rgba(150, 42, 0, 0.8);
44
}
45
@-webkit-keyframes Grow {
46
  0% {
47
    transform: scale(0.1);
48
    -webkit-transform: scale(0.1);
49
    /* Safari and Chrome */
50
    opacity: 0;
51
  }
52
  50% {
53
    opacity: 1;
54
  }
55
  100% {
56
    transform: scale(2);
57
    -webkit-transform: scale(2);
58
    /* Safari and Chrome */
59
    opacity: 0;
60
  }
61
}
62
.container {
63
  position: relative;
64
  width: 50%;
65
  max-width: 400px;
66
  margin: 100px auto 100px;
67
  background: none;
68
}
69
.constant {
70
  position: relative;
71
  width: 100%;
72
}
73
.constant .heightHandle {
74
  position: absolute;
75
  display: block;
76
  width: 100%;
77
  padding-top: 100%;
78
}
79
.circle-main,
80
.circle-main:before,
81
.circle-main:after,
82
.circle-main2,
83
.circle-main2:before,
84
.circle-main2:after,
85
.circle-main3,
86
.circle-main3:before,
87
.circle-main3:after,
88
.circle-main4,
89
.circle-main4:before,
90
.circle-main4:after,
91
.circle-main5,
92
.circle-main5:before,
93
.circle-main5:after,
94
.circle-inner:before,
95
.circle-inner,
96
.circle-travel,
97
.circle-travel:before,
98
.circle-travel:after {
99
  box-shadow: inset 0 0 0 1px rgba(150, 42, 0, 0.5), inset 0 0 10px 2px rgba(150, 42, 0, 0.25);
100
}
101
.electrons span {
102
  box-shadow: 0 0 0 1px rgba(250, 216, 109, 0.5);
103
  background: rgba(250, 216, 109, 0.1);
104
}
105
.crosshair {
106
  background: rgba(150, 42, 0, 0.8);
107
}
108
.circle-main {
109
  position: absolute;
110
  top: 0;
111
  width: 100%;
112
  height: 100%;
113
  border-radius: 50%;
114
}
115
.circle-main:before,
116
.circle-main:after {
117
  content: "";
118
  position: absolute;
119
  border-radius: 4px;
120
}
121
.circle-main:before {
122
  width: 100%;
123
  height: 4px;
124
  top: 50%;
125
  margin-top: -2px;
126
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
127
}
128
.circle-main:after {
129
  width: 4px;
130
  height: 100%;
131
  left: 50%;
132
  margin-left: -2px;
133
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
134
}
135
.circle-main2 {
136
  position: absolute;
137
  top: 0;
138
  left: 37.5%;
139
  width: 25%;
140
  height: 25%;
141
  border-radius: 50%;
142
}
143
.circle-main2:before,
144
.circle-main2:after {
145
  content: "";
146
  position: absolute;
147
  border-radius: 4px;
148
}
149
.circle-main2:before {
150
  width: 100%;
151
  height: 4px;
152
  top: 50%;
153
  margin-top: -2px;
154
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
155
}
156
.circle-main2:after {
157
  width: 4px;
158
  height: 100%;
159
  left: 50%;
160
  margin-left: -2px;
161
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
162
}
163
.circle-main3 {
164
  position: absolute;
165
  bottom: 0;
166
  left: 37.5%;
167
  width: 25%;
168
  height: 25%;
169
  border-radius: 50%;
170
}
171
.circle-main3:before,
172
.circle-main3:after {
173
  content: "";
174
  position: absolute;
175
  border-radius: 4px;
176
}
177
.circle-main3:before {
178
  width: 100%;
179
  height: 4px;
180
  top: 50%;
181
  margin-top: -2px;
182
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
183
}
184
.circle-main3:after {
185
  width: 4px;
186
  height: 100%;
187
  left: 50%;
188
  margin-left: -2px;
189
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
190
}
191
.circle-main4 {
192
  position: absolute;
193
  top: 37.5%;
194
  left: 0;
195
  width: 25%;
196
  height: 25%;
197
  border-radius: 50%;
198
}
199
.circle-main4:before,
200
.circle-main4:after {
201
  content: "";
202
  position: absolute;
203
  border-radius: 4px;
204
}
205
.circle-main4:before {
206
  width: 100%;
207
  height: 4px;
208
  top: 50%;
209
  margin-top: -2px;
210
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
211
}
212
.circle-main4:after {
213
  width: 4px;
214
  height: 100%;
215
  left: 50%;
216
  margin-left: -2px;
217
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
218
}
219
.circle-main5 {
220
  position: absolute;
221
  top: 37.5%;
222
  right: 0;
223
  width: 25%;
224
  height: 25%;
225
  border-radius: 50%;
226
}
227
.circle-main5:before,
228
.circle-main5:after {
229
  content: "";
230
  position: absolute;
231
  border-radius: 4px;
232
}
233
.circle-main5:before {
234
  width: 100%;
235
  height: 4px;
236
  top: 50%;
237
  margin-top: -2px;
238
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
239
}
240
.circle-main5:after {
241
  width: 4px;
242
  height: 100%;
243
  left: 50%;
244
  margin-left: -2px;
245
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
246
}
247
.circle-inner {
248
  position: absolute;
249
  top: 25%;
250
  left: 25%;
251
  width: 50%;
252
  height: 50%;
253
  border-radius: 50%;
254
  -webkit-animation: spin 6s linear infinite;
255
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 10%, transparent 10%, transparent 100%);
256
}
257
.circle-inner:before {
258
  content: "";
259
  position: absolute;
260
  width: 50%;
261
  height: 50%;
262
  border-radius: 50%;
263
  top: 25%;
264
  left: 50%;
265
}
266
.circle-travel {
267
  position: absolute;
268
  width: 100%;
269
  height: 100%;
270
  border-radius: 50%;
271
  top: 0;
272
  left: -50%;
273
  -webkit-animation: spin 3s linear infinite reverse;
274
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 7%, transparent 7%, transparent 100%);
275
}
276
.circle-travel:before,
277
.circle-travel:after {
278
  content: "";
279
  position: absolute;
280
  top: 50%;
281
  width: 10px;
282
  height: 10px;
283
  margin-top: -5px;
284
  border-radius: 50%;
285
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 35%, transparent 35%, transparent 100%);
286
}
287
.circle-travel:before {
288
  left: -5px;
289
}
290
.circle-travel:after {
291
  right: -5px;
292
}
293
.circle-travel {
294
  position: absolute;
295
  width: 100%;
296
  height: 100%;
297
  border-radius: 50%;
298
  top: 0;
299
  left: -50%;
300
  -webkit-animation: spin 3s linear infinite reverse;
301
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 7%, transparent 7%, transparent 100%);
302
}
303
.circle-travel:before,
304
.circle-travel:after {
305
  content: "";
306
  position: absolute;
307
  top: 50%;
308
  width: 10px;
309
  height: 10px;
310
  margin-top: -5px;
311
  border-radius: 50%;
312
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.8) 35%, transparent 35%, transparent 100%);
313
}
314
.circle-travel:before {
315
  left: -5px;
316
}
317
.circle-travel:after {
318
  right: -5px;
319
}
320
.crosshair {
321
  position: absolute;
322
  background-clip: content-box !important;
323
  border-radius: 1px;
324
}
325
.crosshair:nth-child(1) {
326
  width: 200%;
327
  height: 2px;
328
  margin-top: -1px;
329
  top: 50%;
330
  left: -50%;
331
  border-left: solid 8px transparent;
332
  border-right: solid 8px transparent;
333
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
334
}
335
.crosshair:nth-child(1):before,
336
.crosshair:nth-child(1):after {
337
  top: -2px;
338
  border-top: solid 3px transparent;
339
  border-bottom: solid 3px transparent;
340
}
341
.crosshair:nth-child(1):before {
342
  left: -8px;
343
  border-right: solid 6px rgba(150, 42, 0, 0.8);
344
}
345
.crosshair:nth-child(1):after {
346
  right: -8px;
347
  border-left: solid 6px rgba(150, 42, 0, 0.8);
348
}
349
.crosshair:nth-child(2) {
350
  height: 200%;
351
  width: 2px;
352
  margin-left: -1px;
353
  top: -50%;
354
  left: 50%;
355
  border-top: solid 8px transparent;
356
  border-bottom: solid 8px transparent;
357
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
358
}
359
.crosshair:nth-child(2):before,
360
.crosshair:nth-child(2):after {
361
  left: -2px;
362
  border-left: solid 3px transparent;
363
  border-right: solid 3px transparent;
364
}
365
.crosshair:nth-child(2):before {
366
  top: -8px;
367
  border-bottom: solid 6px rgba(150, 42, 0, 0.8);
368
}
369
.crosshair:nth-child(2):after {
370
  bottom: -8px;
371
  border-top: solid 6px rgba(150, 42, 0, 0.8);
372
}
373
.crosshair:before,
374
.crosshair:after {
375
  content: "";
376
  position: absolute;
377
}
378
.electrons {
379
  position: absolute;
380
  width: 100%;
381
  height: 100%;
382
  top: 0;
383
  left: 0;
384
  background: none !important;
385
  box-shadow: none !important;
386
}
387
.electrons span {
388
  position: absolute;
389
  width: 150%;
390
  height: 50%;
391
  left: -25%;
392
  top: 25%;
393
  border-radius: 50%;
394
}
395
.electrons span:nth-child(2) {
396
  -webkit-transform: rotate(45deg);
397
}
398
.electrons span:nth-child(3) {
399
  -webkit-transform: rotate(90deg);
400
}
401
.electrons span:nth-child(4) {
402
  -webkit-transform: rotate(-45deg);
403
}
404
@-webkit-keyframes spin {
405
  0% {
406
    -webkit-transform: rotate(0deg);
407
  }
408
  100% {
409
    -webkit-transform: rotate(360deg);
410
  }
411
}
412
 
 
HTML
1
<div class="container">
2
  <div class="constant">
3
        <div class="heightHandle">
4
            <div class="circle-main">
5
        <div class="halo"></div>
6
                <div class="electrons">
7
                    <span></span>
8
                    <span></span>
9
                    <span></span>
10
                    <span></span>
11
                </div>
12
                <div class="circle-inner">
13
                    <div class="circle-travel">
14
                        <div class="crosshair"></div>
15
                        <div class="crosshair"></div>
16
                    </div>
17
                </div>
18
            </div>
19
            <div class="circle-main2">
20
        <div class="2">
21
                  <div class="electrons">
22
                      <span></span>
23
                      <span></span>
24
                      <span></span>
25
                      <span></span>
26
          </div>
27
                </div>
28
                <div class="circle-inner">
29
                    <div class="circle-travel">
30
                          <div class="crosshair"></div>
31
                          <div class="crosshair"></div>
32
          </div>
33
                </div>
34
            </div>
35
            <div class="circle-main3">
36
                <div class="electrons">
37
                    <span></span>
38
                    <span></span>
39
                    <span></span>
40
                    <span></span>
41
                </div>
42
                <div class="circle-inner">
43
                    <div class="circle-travel">
44
                        <div class="crosshair"></div>
45
                        <div class="crosshair"></div>
46
                    </div>
47
                </div>
48
            </div>
49
            <div class="circle-main4">
50
                <div class="electrons">
51
                    <span></span>
52
                    <span></span>
53
                    <span></span>
54
                    <span></span>
55
                </div>
56
                <div class="circle-inner">
57
                    <div class="circle-travel">
58
                        <div class="crosshair"></div>
59
                        <div class="crosshair"></div>
60
                    </div>
61
                </div>
62
            </div>
63
            <div class="circle-main5">
64
                <div class="electrons">
65
                    <span></span>
66
                    <span></span>
67
                    <span></span>
68
                    <span></span>
69
                </div>
70
                <div class="circle-inner">
71
                    <div class="circle-travel">
72
                        <div class="crosshair"></div>
73
                        <div class="crosshair"></div>
74
                    </div>
75
                </div>
76
            </div>
77
        </div>
78
    </div>
79
</div>
 

Join Effecthub.com

Working with Global Gaming Artists and Developers!


Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character