<input id="toggle-heart" type="checkbox"/>
<label for="toggle-heart">❤</label>
View Compiled
$bubble-d: 4.5rem; // bubble diameter
$bubble-r: .5*$bubble-d; // bubble-radius
$sparkle-d: .375rem;
$sparkle-r: .5*$sparkle-d;
$shadow-list: (); // init shadow list
$n-groups: 7; // number of groups
$group-base-angle: 360deg/$n-groups;
$group-distr-r: $bubble-r; // circular distribution radius for groups
$n-sparkles: 2;
$sparkle-base-angle: 360deg/$n-sparkles;
$sparkle-off-angle: 60deg; // offset angle from radius
@for $i from 0 to $n-groups {
// current group angle, starting fron 12 o'clock
$group-curr-angle: $i*$group-base-angle - 90deg;
// coords of the central point of current group of sparkles
$xg: $group-distr-r*cos($group-curr-angle);
$yg: $group-distr-r*sin($group-curr-angle);
@for $j from 0 to $n-sparkles {
$sparkle-curr-angle: $group-curr-angle +
$sparkle-off-angle + $j*$sparkle-base-angle;
// coordinates of curent sparkle
$xs: $xg + $sparkle-d*cos($sparkle-curr-angle);
$ys: $yg + $sparkle-d*sin($sparkle-curr-angle);
// add to shadow list
$shadow-list: $shadow-list, $xs $ys;
}
}
@mixin bubble($ext) {
transform: scale(1);
border-color: #cc8ef5;
border-width: $ext;
}
body {
display: flex;
justify-content: center;
margin: 0;
height: 100vh;
}
[id='toggle-heart'] {
position: absolute;
left: -100vw;
&:checked + label {
color: #e2264d;
will-change: font-size;
animation: heart 1s cubic-bezier(.17, .89, .32, 1.49);
&:before, &:after {
animation: inherit;
animation-timing-function: ease-out;
}
&:before {
will-change: transform, border-width, border-color;
animation-name: bubble;
}
}
}
[for='toggle-heart'] {
align-self: center;
position: relative;
color: #aab8c2;
font-size: 2em;
cursor: pointer;
&:before, &:after {
position: absolute;
z-index: -1;
top: 50%; left: 50%;
border-radius: 50%;
content: '';
}
&:before {
box-sizing: border-box;
margin: -$bubble-r;
border: solid $bubble-r #e2264d;
width: $bubble-d; height: $bubble-d;
transform: scale(0);
}
&:after {
margin: -$sparkle-r;
width: $sparkle-d; height: $sparkle-d;
box-shadow: $shadow-list;
}
}
@keyframes heart {
0%, 17.5% { font-size: 0; }
}
@keyframes bubble {
15% { @include bubble($bubble-r); }
30%, 100% { @include bubble(0); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.