html - 喜欢点击时的图标颜色

Question

我创建了一个“赞”功能，其中包含一个将添加到产品卡片中的图标。

我需要让图标在点击后保持红色，但同时还需要显示动画。

从外观上看，它们相互重叠并且相互抵消。

.heart{
    font-size: 24px!important;
    color: #fff;
}

/* PUSH HOVER EFFECT */

@-webkit-keyframes hvr-push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes hvr-push {
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.hvr-push {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}

.hvr-push:active {
  -webkit-animation-name: hvr-push;
  animation-name: hvr-push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* CHANGE ICON ON HOVER */

.change-icon > .fa + .fa,
.change-icon:hover > .fa {
    display: none;
    
}

.change-icon:hover > .fa + .fa {
    display: inherit;
    color:red; 
}

<div>
   <span class="change-icon">
     <i class="hvr-push heart fa fa-heart-o"></i>
     <i class="hvr-push heart fa fa-heart"></i>
  </span>
</div>

Answer 1

试试这个:

/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
  $(this).toggleClass('is_animating');
  $(this).toggleClass('liked');
});

/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
  $(this).toggleClass('is_animating');
});

.heart {
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
}

.heart:hover {
  background-position:right;
}

.liked {
  background-position:right;
}

.is_animating {
  animation: heart-burst .8s steps(28) 1;
}

@keyframes heart-burst {
  from {background-position:left;}
  to { background-position:right;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heart"></div>