<!-- Inspired by a video from @appliedesoterics https://www.instagram.com/appliedesoterics/ -->
<section class="main">
<div class="main__content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
// Global Styles
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
// Placeholders
%flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// Main Styles
.main {
width: 100%;
height: 100%;
@extend %flex-center;
&__content {
width: 100%;
height: 100%;
background: #161616;
@extend %flex-center;
}
}
.main__content {
div {
position: absolute;
border-top : 2rem solid #161616;
border-right : 2rem solid #161616;
border-bottom : 2rem solid slateblue;
border-left : 2rem solid slateblue;
box-shadow: 2px 8px 40px rgba($color: #000, $alpha: .5);
&:nth-child(1) {
width: 20rem;
height: 20rem;
border-radius: 20rem;
animation: cycleAnimation 24s linear forwards infinite;
animation-delay: .1s
}
&:nth-child(2) {
width: 16rem;
height: 16rem;
border-radius: 16rem;
animation: cycleAnimation 12s linear forwards infinite;
}
&:nth-child(3) {
width: 12rem;
height: 12rem;
border-radius: 12rem;
animation: cycleAnimation 8s linear forwards infinite;
}
&:nth-child(4) {
width: 8rem;
height: 8rem;
border-radius: 8rem;
animation: cycleAnimation 6s linear forwards infinite;
}
&:nth-child(5) {
width: 4rem;
height: 4rem;
border-radius: 4rem;
animation: cycleAnimation 4s linear forwards infinite;
}
&:nth-child(6) {
width: 0rem;
height: 0rem;
border-radius: 4rem;
animation: cycleAnimation 2s linear forwards infinite;
}
}
}
@keyframes cycleAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.