Также подойдет для русской рулетки

                        
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;

  }

}