HTML
<div class="retro">
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
SCSS
body, html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
background: linear-gradient(to bottom, rgba(64,58,62,1) 0%,
rgba(190,88,105,1) 100%);
}
.retro {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50vh;
height: 50vh;
border-radius: 50%;
&:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
filter: blur(40px);
animation: fadeIn 1s easeIn;
opacity: 1;
transform: scale(1.6);
}
.lines {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
overflow: hidden;
opacity: 0.9;
.line {
width: 100%;
position: relative;
height: 1.4%;
margin-bottom: 0.6%;
background: #fff;
}
@for $i from 1 through 50 {
.line:nth-child(#{$i}) {
animation: rotateLine 4s ($i * 0.2s) infinite;
}
}
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rotateLine {
0% { transform: rotateX(0deg); }
60% { transform: rotateX(60deg); }
90% { transform: rotateX(90deg); }
100% { transform: rotateX(0deg); }
}
1 Response