Radiating

HTML
<div class="container"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>
SCSS
@import 'compass/css3'; body { background: #333; } .container { position: relative; width: 100vw; height: 100vh; .circle { position: absolute; top: 50%; left: 50%; border: 5px solid #3498db; @include border-radius(50%); $count: 8; @for $i from 1 through $count { &:nth-child(#{$i}) { @include animation(grow 3s #{(.5*$i)}s infinite ease-out); } } } } @include keyframes(grow) { 100% { padding: 200px; border-color: #2ecc71; margin: -200px 0 0 -200px; opacity: 0; } }
JAVASCRIPT
Expand for more options Login