html代码

css代码

.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%);

}

js代码

$(function() {

$(".heart").on("click", function() {

$(this).toggleClass("is-active");

});

});

以上就是小编为大家带来的jquery心形点赞关注效果的简单实现全部内容了，希望大家多多支持脚本之家~