SCSS
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body { background: rgba(233, 30, 99, 0.1); }
.wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
perspective: 100px;
transform-style: preserve-3d;
width: 230px;
height: 230px;
margin: auto;
.square {
border: 1px solid;
position: absolute;
animation: slowRotate 6s infinite ease-in-out alternate;
box-shadow: 0 0 0 transparent;
}
}
@keyframes slowRotate {
100% {
transform:rotate(100deg);
}
}
@for $i from 1 through 40 {
.wrap > .square:nth-of-type(#{$i}){
height: ($i * 10px);
width: ($i * 10px);
transform: rotate( ($i * 1deg) );
animation-delay: ($i * .25s);
// border-color: hsla(($i * 8 + 80), 100%, 40%, 1);
border-color: hsla(($i * 10 + 40), 100%, 50%, 1);
box-shadow: 0 0 20px hsla(($i * 10 + 40), 100%, 50%, 1);
top: 100px + ($i * -5px);
left: 100px + ($i * -5px);
border-radius: 8px - ($i * 0.5px);
opacity: 1 - ($i * 0.03);
}
}
1 Response