CSS
.ring {
display: inline-block;
margin: 1em;
width: 5em;
height: 5em;
border-radius: 50%;
vertical-align: middle;
animation: iluset 2s infinite alternate linear;
-webkit-animation: iluse 2s infinite alternate cubic-bezier(0.5, 0, 0.5, 1);
transform-origin: -50px 50px;
}
.ring:nth-child(1) {
width: 6em;
height: 6em;
position: absolute;
left: 50%;
top: 50%;
box-shadow: .5em 0 0 0 darkmagenta inset, 1em 0 0 0 crimson inset, 1.5em 0 0 0 orangered inset, 2em 0 0 0 orange inset, 2.5em 0 0 0 gold inset, 3em 0 0 0 yellowgreen inset, 3.5em 0 0 0 skyblue inset, 4em 0 0 0 steelblue inset, 4.5em 0 0 0 darkmagenta inset, .5em 0 0 0 darkmagenta, 1em 0 0 0 crimson, 1.5em 0 0 0 orangered, 2em 0 0 0 orange, 2.5em 0 0 0 gold, 3em 0 0 0 yellowgreen, 3.5em 0 0 0 skyblue, 4em 0 0 0 steelblue, 4.5em 0 0 0 darkmagenta;
}
@keyframes iluse {
from {
transform: translate(-6em,3em) rotate(230deg);
}
to {
transform: translate(6em,3em) rotate(300deg);
}
}
