Heart Button
HTML
<main role='main'>
<i class="fa fa-heart" aria-hidden="true"></i>
</main>
SCSS
$link-color: tomato;
$text-color: #fff;
.fa-heart {
cursor: pointer;
font-size: 50px;
color: $link-color;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #2c3e50;
&::before {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all ease-out .6s;
color: $link-color;
font-size: 100rem;
opacity: 0;
animation: ease-out .6s;
content: '\2764 ';
}
&.love::before {
animation-name: heart;
}
}
main {
position: relative;
}
// Animation
@keyframes heart {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
10% {
opacity: 1;
transform: translate(-50%, -50%) scale(.1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1);
}
}
JAVASCRIPT
var button = document.querySelectorAll('.fa')[0];
var body = document.querySelectorAll('body')[0];
button.addEventListener('click', activateLove, false);
body.addEventListener('webkitAnimationEnd', disableLove, false);
body.addEventListener('animationend', disableLove, false);
function activateLove() {
body.classList.add('love');
}
function disableLove() {
body.classList.remove('love');
}
