eNNzrv

eNNzrv.markdown

eNNzrv

A Pen by Kazuhito Hokamura on CodePen.

License.

index.html

<span class="blank-heart"></span>

script.js

var icon = document.querySelector('span');
icon.addEventListener('click', function() {
  if (icon.classList.contains('heart')) {
    icon.classList.remove('heart');
    icon.classList.add('blank-heart');
  }
  else {
    icon.classList.remove('blank-heart');
    icon.classList.add('heart');
    icon.classList.add('animation-start');
  }
});

style.css

span {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  font-family: sans-serif;
  cursor: pointer;
}
.blank-heart:before {
  content: '♡';
  font-size: 30px;
  display: inline-block;
  color: pink;
}
.heart:before {
  content: '♥';
  color: pink;
  font-size: 30px;
  display: inline-block;
  outline: none;
}

.animation-start.heart:before {
  -webkit-animation: heart 0.5s;
  animation: heart 0.5s;
}

@-webkit-keyframes heart {
  0% { -webkit-transform: scale(1) }
  50% { -webkit-transform: scale(1.3) }
  100% { -webkit-transform: scale(1) }
}
@keyframes heart {
  0% { -webkit-transform: scale(1) }
  50% { -webkit-transform: scale(1.3) }
  100% { -webkit-transform: scale(1) }
}
@keyframes heart {
  0% { transform: scale(1) }
  50% { transform: scale(1.3) }
  100% { transform: scale(1) }
}
@keyframes heart {
  0% { transform: scale(1) }
  50% { transform: scale(1.3) }
  100% { transform: scale(1) }
}