#Codevember 1 - Infinite Hole

HTML
<div class='hole'> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div>
SCSS
@import "compass/css3"; $particles: 10; $particleSize: 22vw; $lapDuration: 3s; $shadowColor: #ffffff; html, body { overflow: hidden; background: black; } .hole { position: absolute; top: 50%; left: 50%; z-index: 2; } i { display: block; position: absolute; width: $particleSize; height: $particleSize; left: -$particleSize/2; top: -$particleSize/2; border-radius: $particleSize; opacity: 0; animation-name: scale; animation-duration: $lapDuration; animation-iteration-count: infinite; animation-timing-function: linear; } @for $i from 1 through $particles { i:nth-child(#{$i}) { animation-delay: $i * ($lapDuration / $particles); } } @keyframes scale { 0% { transform: scale(2); opacity: 0; box-shadow: 0px 0px 50px rgba($shadowColor, 0.5); } 50% { transform: scale(1) translate(0px, -5px); opacity: 1; box-shadow: 0px 8px 20px rgba($shadowColor, 0.5); } 100% { transform: scale(0.1) translate(0px, 5px); opacity: 0; box-shadow: 0px 10px 20px rgba($shadowColor, 0); } }
JAVASCRIPT
Expand for more options Login