|
.center { |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%,-50%); |
|
} |
|
.circle{ |
|
position: absolute; |
|
width: 30px; |
|
height: 30px; |
|
background: transparent; |
|
border-radius: 50%; |
|
box-shadow: |
|
30px 30px 0px #1abc9c, |
|
30px -30px 0px #2ecc71, |
|
-30px 30px 0px #9b59b6, |
|
-30px -30px 0px #e67e22, |
|
0px 42px 0px #f1c40f, |
|
0px -42px 0px #2c3e50, |
|
42px 0px 0px #66ccff, |
|
-42px 0px 0px #e74c3c; |
|
animation: animate 3s infinite; |
|
} |
|
@keyframes animate{ |
|
0%{ |
|
box-shadow: |
|
3px 3px 3px #1abc9c, |
|
3px -3px 0px #2ecc71, |
|
-3px 3px 0px #9b59b6, |
|
-3px -3px 0px #e67e22, |
|
0px 4px 0px #f1c40f, |
|
0px -4px 0px #2c3e50, |
|
4px 0px 0px #66ccff, |
|
-4px 0px 0px #e74c3c; |
|
transform: rotate(0deg) |
|
} |
|
50%{ |
|
box-shadow: |
|
30px 30px 0px #1abc9c, |
|
30px -30px 0px #2ecc71, |
|
-30px 30px 0px #9b59b6, |
|
-30px -30px 0px #e67e22, |
|
0px 42px 0px #f1c40f, |
|
0px -42px 0px #2c3e50, |
|
42px 0px 0px #66ccff, |
|
-42px 0px 0px #e74c3c; |
|
transform: rotate(360deg) |
|
} |
|
100%{ |
|
box-shadow: |
|
3px 3px 3px #1abc9c, |
|
3px -3px 0px #2ecc71, |
|
-3px 3px 0px #9b59b6, |
|
-3px -3px 0px #e67e22, |
|
0px 4px 0px #f1c40f, |
|
0px -4px 0px #2c3e50, |
|
4px 0px 0px #66ccff, |
|
-4px 0px 0px #e74c3c; |
|
transform: rotate(720deg) |
|
} |
|
} |
|
|