SCSS
body {
background: hsl(230,70,10);
}
$size: 10px;
$box-shadow: ();
$second-shadow: ();
@for $n from 0 through 360 {
$box-shadow: append($box-shadow,
sin($n) * $size * 15
cos($n) * $size * 15
0
hsl($n,90,60), comma);
$second-shadow: append($second-shadow,
cos($n) * $size * $n
sin($n) * $size * -$n //remove the - for something cool
0
complement(hsl($n,90,60)), comma);
}
.one {
animation: anim 10s infinite alternate ease-in-out;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
margin-top: -$size;
margin-left: -$size;
border-radius: 50%;
width: $size;
height: $size;
transform: translate3d(1,1,1);
will-change: box-shadow;
box-shadow: $box-shadow;
}
@keyframes anim {
100% {
box-shadow: $second-shadow;
transform:
//perspective(80vh)
rotateX(45deg)
rotateY(45deg)
;
}
}
