3D rainbow hypnosis dance

3d-rainbow-hypnosis-dance.markdown

3D rainbow hypnosis dance

Dancing of colored hypnotic lines with pure css

© Misha Tsankashvili

A Pen by Misha Tsankashvili on CodePen.

License.

index.haml

-2.times do
  .star
    -50.times do
      .line
        %i

script.js

//pure css 

style.scss

$line-width: 50px;
$line-quantity: 50;
$speed: 2.5s;
html,body{
  width: 100%;height: 100%;
}
body{
  background-color: #140032;
  overflow: hidden;
  margin:0;
  *,*:after,*:before{
    position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
  }
}
.star{
  &:first-child{
    transform: scale(-1,1);
  }
  .line{
    i{
      display: inline-block;
      width: $line-width * 50 / 100;
      height: $line-width * 5; 
      transform: translate(0px) rotate(0deg) scale(1);
      animation: $speed processing ease-in-out infinite;
      &:before{
        content: "";
        display: inline-block;
        width: 80%;height: 80%;
        background-color: #140032;
      }
    }
    @for $i from 0 through $line-quantity{
      &:nth-child(#{$i}){
        transform: rotate($i * 360deg / $line-quantity) translate(350px);
        i{
          animation-delay: -$i * $speed / $line-quantity;
          background-color: hsla($i * 360 /$line-quantity,100%,50%,1);
          box-shadow: hsla($i * 360 / $line-quantity,100%,50%,1) 5px 5px 10px 2px;
        }
      }
    }
  }
}
@keyframes processing{
  50%{
    transform: translate(-350px) rotate(360deg) scale(0);
  }
}