Skip to content

Instantly share code, notes, and snippets.

@marksumoto
Created November 5, 2018 23:33
Show Gist options
  • Save marksumoto/914206065de2f98ee4200250cbd5165e to your computer and use it in GitHub Desktop.
Save marksumoto/914206065de2f98ee4200250cbd5165e to your computer and use it in GitHub Desktop.
3D rainbow hypnosis dance
-2.times do
.star
-50.times do
.line
%i
$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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment