效果GIF：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点赞</title> <script src="../demo/jquery-2.1.1.min.js"></script> <style> .heart { background: url(./web_heart_animation.png); background-position: left; background-repeat: no-repeat; height: 100px; width: 100px; cursor: pointer; position: absolute; left: 8px; background-size: 2886%; } .heart:hover, .heart:focus { background-position: right; } @-webkit-keyframes heartBlast { 0% { background-position: left; } 100% { background-position: right; } } @keyframes heartBlast { 0% { background-position: left; } 100% { background-position: right; } } .heartAnimation { display: inline-block; -webkit-animation-name: heartBlast; animation-name: heartBlast; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: steps(28); animation-timing-function: steps(28); background-position: right; } .feed p { font-family: "Microsoft YaHei", 'Georgia', Times, Times New Roman, serif; font-size: 25px; } .feed { clear: both; margin-bottom: :20px; height: 150px; position: relative; } a { color: #7ac9ed; } p { margin: 0px; padding: 0px; } .likeCount { font-family: 'Georgia', Times, Times New Roman, serif; margin-top: 32px; margin-left: 68px; font-size: 25px; color: #999999; padding-top: 31px; } </style> </head> <body> <div class="heart" id="like1" rel="like"></div> <div class="likeCount" id="likeCount1">14</div> <script> $(document).ready(function() { $('body').on("click", '.heart', function() { var A = $(this).attr("id"); var B = A.split("like"); var messageID = B[1]; var C = parseInt($("#likeCount" + messageID).html()); $(this).css("background-position", "") var D = $(this).attr("rel"); if(D === 'like') { $("#likeCount" + messageID).html(C + 1); $(this).addClass("heartAnimation").attr("rel", "unlike"); } else { $("#likeCount" + messageID).html(C - 1); $(this).removeClass("heartAnimation").attr("rel", "like"); $(this).css("background-position", "left"); } }); }); </script> </body> </html>
参考网站：http://demo.lanrenzhijia.com