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);
}
}
