实现效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点赞心心</title>
<style>
*{margin: 0;padding: 0;}
.wrap{position: relative;}
.hrt-illus {
background-image: url(images/heart.png);
background-position: left center;
width: 70px;
height: 70px;
position: absolute;
top: 60px;
background-size: cover;
cursor: pointer;
}
.hrt-illus.act {
animation: heart-burst steps(28) 0.8s 1 forwards;
display: inline-block;
}
@keyframes heart-burst {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="hrt-illus"></div>
</div>
<script src="jquery.js"></script>
<script>
$('.hrt-illus').on('click',function(){
$(this).addClass('act')
})
</script>
</body>
</html>
图片素材: