| .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) | |
| } | |
| } | |