Retro Wave Animation

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); } }
JAVASCRIPT
Expand for more options Login