ハートマーク機能

WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた

ハートマーク機能

Twitterのハートマーク機能こと「いいね」のエフェクトがどうなっているのか調べてみた

.heart {
  width: 100px;
  height: 100px;
  background: url(http://nelog.jp/wp-content/uploads/2016/03/heart_animation.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
}
.heart:hover {
  background-position: -2800px 0;
  -webkit-transition: background 1s steps(28);
  transition: background 1s steps(28);
}