Codepad Logo Pulser

HTML
<input type="checkbox" id="logo"/> <label for="logo"> <div class="logo"> <img src="https://dl.dropboxusercontent.com/s/r0n3iyiuhub6j1t/test-fill-01.svg?dl=0"> </div> <div class="pulsers"> <div class="pulser"></div> <div class="pulser"></div> <div class="pulser"></div> <div class="pulser"></div> <div class="pulser"></div> </div> </label>
SCSS
$bg: #222; $btn: #3498db; $logo-hi: #ffffff; $logo-mid: #ffeeef; $logo-lo: #ffcbd7; $rotate-span: 38deg; $rotate-gradient: 76deg; @mixin center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } * { box-sizing: border-box; } html, body { height: 100%; padding: 0; margin: 0; } body { display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: $bg; } input { display: none; } label { position: relative; width: 25%; background-color: $btn; border: none; border-radius: 100%; cursor: pointer; user-select: none; z-index: 2; transform: translate3d(0, 0, 0); animation: jumpIn .4s ease-out; transition: transform 0.8s ease-out; &:after { content: ""; display: block; padding-bottom: 100%; } &:active { transform: scale(0.9); } } .logo { @include center; width: 50%; height: 27%; overflow: hidden; opacity: 0; transform: translateZ(0); animation: fadeIn 0s .21s forwards; transition: transform 0.2s ease-out; z-index: 3; } // Pulsers $pulsers: 6; .pulser { @include center; width: 100%; height: 100%; border-radius: 100%; box-shadow: rgba($logo-mid, .4) 0 0 0 1px; z-index: 1; transform: scale(0) translateZ(0); @for $i from 1 to $pulsers { $ring: 1 - $i / 4; $delay: $i * .1s; &:nth-child(#{$i}) { top: 100% * -$i; right: 100% * -$i; bottom: 100% * -$i; left: 100% * -$i; width: 20% + 100% + 70% * $i; height: 20% + 100% + 70% * $i; animation: rings 0.4s $delay ease-out forwards; opacity: $ring; } } } input:checked { + label { animation: none; transform: scale(1.05) translate3d(0, 0, 0); .logo { opacity: 1; animation: none; transform: scale(0.8) translate3d(0, 0, 0); } .pulser { background-color: $btn; box-shadow: none; opacity: 0; @for $i from 1 to $pulsers { &:nth-child(#{$i}) { right: 0; left: 0; width: 100%; height: 100%; transition: transform 0s; animation: pulse 1.2s .3s * $i ease-in-out infinite; } } } } } // Animations @keyframes fadeIn { to { opacity: 1; } } @keyframes jumpIn { 0% { transform: scale(2) translate3d(0, 0, 0); } 40%, 50% { transform: scale(0.2) translate3d(0, 0, 0); } 100% { transform: scale(1) translate3d(0, 0, 0); } } @keyframes rings { from { transform: scale(0) translate3d(0, 0, 0); } to { transform: scale(1) translate3d(0, 0, 0); } } @keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(4); } }
JAVASCRIPT
// Click on the logo
Expand for more options Login