<span class="empty"></span>
$(".content").on("click","span",function(){
if($(this).hasClass("empty")){
$(this).removeClass("empty");
$(this).addClass("to-fill");
}
else if($(this).hasClass("fill")){
$(this).removeClass("fill");
$(this).addClass("to-empty");
}
else if($(this).hasClass("to-fill")){
$(this).removeClass("to-fill");
$(this).addClass("to-empty");
}
else{
$(this).removeClass("to-empty");
$(this).addClass("to-fill");
}
})
.product-detail .product-detail-right .tips span {
cursor: pointer;
width: 0.64rem;
height: 0.64rem;
display: inline-block;
}
.product-detail .product-detail-right .tips span.empty {
background: url(../images/heart_animation1.png) no-repeat;
background-position: left;
background-size: cover;
}
.product-detail .product-detail-right .tips span.fill {
background: url(../images/heart_animation2.png) no-repeat;
background-position: left;
background-size: cover;
}
.product-detail .product-detail-right .tips span.to-fill {
background: url(../images/heart_animation1.png) no-repeat;
background-position: left;
animation-name: toFill;
animation-duration: 0.8s;
animation-iteration-count: 1;
animation-timing-function: steps(31);
background-position: right;
background-size: cover;
}
@keyframes toFill {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
.product-detail .product-detail-right .tips span.to-empty {
background: url(../images/heart_animation2.png) no-repeat;
background-position: left;
animation-name: toEmpty;
animation-duration: 0.4s;
animation-iteration-count: 1;
animation-timing-function: steps(15);
background-position: right;
background-size: cover;
}
@keyframes toEmpty {
0% {
background-position: left;
}
100% {
background-position: right;
}
}