{% else-1 %}
Также подойдет для русской рулетки *

                        
HTML:

<div></div>

CSS:

div {
border-radius:50%;
height:2px; width:2px; /* To allow border-radius to work */
position:absolute;
top:50%; left:50%;
margin-top:-1px; margin-left:-1px;
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
-webkit-animation:rotate 12s infinite linear;
animation:rotate 12s infinite linear;
}
@keyframes rotate {
16.67% {
box-shadow:
-75px -125px 0 40px #76bdd1,
75px -125px 0 40px #6cce74,
150px 0px 0 40px #c18d46,
75px 125px 0 40px #c14745,
-75px 125px 0 40px #2e1e5b,
-150px 0px 0 40px #9c37a6;
}
33.33% {
box-shadow:
-75px -125px 0 40px #9c37a6,
75px -125px 0 40px #76bdd1,
150px 0px 0 40px #6cce74,
75px 125px 0 40px #c18d46,
-75px 125px 0 40px #c14745,
-150px 0px 0 40px #2e1e5b;
}
50% {
box-shadow:
-75px -125px 0 40px #2e1e5b,
75px -125px 0 40px #9c37a6,
150px 0px 0 40px #76bdd1,
75px 125px 0 40px #6cce74,
-75px 125px 0 40px #c18d46,
-150px 0px 0 40px #c14745;
}
66.67% {
box-shadow:
-75px -125px 0 40px #c14745,
75px -125px 0 40px #2e1e5b,
150px 0px 0 40px #9c37a6,
75px 125px 0 40px #76bdd1,
-75px 125px 0 40px #6cce74,
-150px 0px 0 40px #c18d46;
}
88.88% {
box-shadow:
-75px -125px 0 40px #c18d46,
75px -125px 0 40px #c14745,
150px 0px 0 40px #2e1e5b,
75px 125px 0 40px #9c37a6,
-75px 125px 0 40px #76bdd1,
-150px 0px 0 40px #6cce74;
}
100% {
transform:rotate(-360deg);
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
}
}
@-webkit-keyframes rotate {
16.67% {
box-shadow:
-75px -125px 0 40px #76bdd1,
75px -125px 0 40px #6cce74,
150px 0px 0 40px #c18d46,
75px 125px 0 40px #c14745,
-75px 125px 0 40px #2e1e5b,
-150px 0px 0 40px #9c37a6;
}
33.33% {
box-shadow:
-75px -125px 0 40px #9c37a6,
75px -125px 0 40px #76bdd1,
150px 0px 0 40px #6cce74,
75px 125px 0 40px #c18d46,
-75px 125px 0 40px #c14745,
-150px 0px 0 40px #2e1e5b;
}
50% {
box-shadow:
-75px -125px 0 40px #2e1e5b,
75px -125px 0 40px #9c37a6,
150px 0px 0 40px #76bdd1,
75px 125px 0 40px #6cce74,
-75px 125px 0 40px #c18d46,
-150px 0px 0 40px #c14745;
}
66.67% {
box-shadow:
-75px -125px 0 40px #c14745,
75px -125px 0 40px #2e1e5b,
150px 0px 0 40px #9c37a6,
75px 125px 0 40px #76bdd1,
-75px 125px 0 40px #6cce74,
-150px 0px 0 40px #c18d46;
}
88.88% {
box-shadow:
-75px -125px 0 40px #c18d46,
75px -125px 0 40px #c14745,
150px 0px 0 40px #2e1e5b,
75px 125px 0 40px #9c37a6,
-75px 125px 0 40px #76bdd1,
-150px 0px 0 40px #6cce74;
}
100% {
-webkit-transform:rotate(-360deg);
box-shadow:
-75px -125px 0 40px #6cce74,
75px -125px 0 40px #c18d46,
150px 0px 0 40px #c14745,
75px 125px 0 40px #2e1e5b,
-75px 125px 0 40px #9c37a6,
-150px 0px 0 40px #76bdd1;
}
}
0 81 0
Без комментариев...