jquery心形点赞关注效果的简单实现

<div class="stage">  <div class="heart"></div> </div>

.heart {  width: 100px;  height: 100px;  background: url("") no-repeat;  background-position: 0 0;  cursor: pointer;  -webkit-transition: background-position 1s steps(28);  transition: background-position 1s steps(28);  -webkit-transition-duration: 0s;      transition-duration: 0s; } .heart.is-active {  -webkit-transition-duration: 1s;      transition-duration: 1s;  background-position: -2800px 0; }  body {  background: -webkit-linear-gradient(315deg, #121721 0%, #000000 100%) fixed;  background: linear-gradient(135deg, #121721 0%, #000000 100%) fixed;  color: #FFF;  font: 300 16px/1.5 "Open Sans", sans-serif; }  .stage {  position: fixed;  top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%);      transform: translate(-50%, -50%); } 

$(function() {  $(".heart").on("click", function() {   $(this).toggleClass("is-active");  }); });