SCSS
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
background: black;
overflow: hidden;
}
.wave {
color: #4F60DA;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
background: linear-gradient(to top, #F51B05 0%, #F5CD05 50%, #6705F5 50%, #FF18BD 100%);
&:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
background: #222;
}
@for $i from 1 through 24 {
$s: 500px;
&:nth-child(#{$i}) {
width: $s - ($i * 20);
height: $s - ($i * 20);
margin-top: -($s / 2) + ($i * 10);
margin-left: -($s / 2) + ($i * 10);
&:before {
width: $s - ($i * 20) - 10;
height: $s - ($i * 20) - 10;
margin-top: -($s / 2) + ($i * 10) + 5;
margin-left: -($s / 2) + ($i * 10) + 5;
}
}
}
animation: wave 1.5s infinite alternate;
}
@keyframes wave {
100% {
transform: rotate(175deg);
}
}
@for $i from 1 through 24 {
.wave:nth-child(#{$i}) {
$t: $i / 10 + s;
animation-delay: $t;
}
}
body:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 250px;
margin-left: -250px;
background: black;
}
